VueJs 第一次没有用按键 ESC 清除输入值

Question

我想在按下 ESC 键时清除输入，我的错误是当我第一次按下 ESC 键时，输入没有被清除但是当我第二次按下 ESC 时它被清除了

当我在第一次按下后在控制台中显示输入值时，它是空的但不在 UI

这是管理 ESC 键的一小段代码：

Html :

<input
      type="text"
      :name="context.name"
      :id="context.id"
      v-model="context.model"
      @blur="context.blurHandler"
      @keyup="getSuggestions"
      autocomplete="no"
      class="mc-text-input"
      ref="autocompleteInput"
    />

以及 ESC 事件：

case 27: {
          console.log('Before : ' + this.$refs.autocompleteInput.value)
          this.$refs.autocompleteInput.value = ''
          console.log('After : ' + this.$refs.autocompleteInput.value)
          this.resetAutocompleteElt() // hide the autocomplete list
          break
}

我需要强制第一个 ESC 键来清除这个输入

Answer 1

v-model 使用 two-way 绑定，因此您应该更新 context.model 而不是尝试直接更新元素值，因为这可能会导致您的问题。

即假设您可以在处理事件的函数中访问 context.model。

替换：

this.$refs.autocompleteInput.value = ''

与：

this.context.model = '';

VueJs 第一次没有用按键 ESC 清除输入值

VueJs the input value doesnt cleared with the keypress ESC the first time

javascript

ref

vue.js

vuejs2