首页 > 解决方案 > @keyup.delete输入直到为空时如何触发功能?VueJS

问题描述

在我的 DOM 中,我有一个输入区域,输入一些文本以插入标签

<input @keyup.delete="inputBackspace()" @keyup.enter="insert_tag()">

这是我的方法

insert_tag() {
  let value = this.tagInput
  this.tags.push(value)
  this.tagInput = ''
},
inputBackspace() {
  if (this.tagInput === '') this.tags.splice(-1, 1)
}

但是上面的方法不是我想要的结果,它在标签瞬间为空时通过输入退格键触发拼接功能。我更喜欢先输入退格让输入值变为空,然后再次输入退格触发拼接功能。

标签: javascriptinputvuejs2

解决方案


将您的事件处理程序从 keyup 更改为 keydown,如下所示@keydown.delete = "inputBackspace ()"

这是此示例的沙箱https://codesandbox.io/s/kind-merkle-nhtl8?file=/src/App.vue


推荐阅读