vue.js键盘输入，键盘按下事件落后一个字符

Question

我正在使用keydown / keyup事件，该事件调用一个javascript函数，该函数将输入框的值打印到控制台（以及事件的currentTarget字段的值），但我注意到这是一个字符晚了。例如，如果我在输入框中键入hello，则我只会在控制台中看到hell，直到按下另一个键才看到hello，即使此时我已经键入hello1。为什么是这样？而且周围有吗？

这是HTML：

<input type="text" class="form__field" v-model="keywords" v-on:keyup.enter="queryForKeywords" v-on:keydown="queryForKeywords">

和JS：

queryForKeywords: function(event) {
        var self = this;
        if (this.keywords.length > 2) {
            console.log("keywords value: " + this.keywords);
            console.log("event value: " + event.currentTarget.value);
    }

Answer 1

真正的问题与 vue.js 根本无关

问题隐藏在keydown事件背后！

因此，当事件触发时，输入值尚未更新。小提琴示例

MDN-- 按键事件

一般来说，keydown它用于通知您按下了哪个键。你可以像这样访问它：

document.addEventListener('keydown', logKey);

function logKey(e) {
  console.log(e.key)
}

作为解决方案，您可以使用keyup事件：Fiddle

我的建议是使用自定义 v 模型:value和@input事件。

<input type="text" :value="keywords" @input="queryForKeywords">

和脚本：

  data: {
    keywords: ''
  },

  methods: {
     queryForKeywords(event) {
       const value = event.target.value
         this.keywords = value
       if (value.length > 2) {
            console.log("keywords value: " + this.keywords);
       }
    }
  }

查看实际效果

Answer 2

因为您依赖于输入v-model来更新keywords属性，所以在重新渲染Vue组件之前，值不会更新。

您可以keywords在传递给this.$nextTick此示例的回调中访问的更新值：

new Vue({
  el: '#app',
  data() {
    return { keywords: '' }
  },
  methods: {
    queryForKeywords: function(event) {
      this.$nextTick(() => {
        if (this.keywords.length > 2) {
         console.log("keywords value: " + this.keywords);
        }
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <input type="text" class="form__field" v-model="keywords" v-on:keyup.enter="queryForKeywords" v-on:keydown="queryForKeywords">
</div>

Answer 3

目前接受的答案是针对旧版本的 vue，在最新版本中应该使用 @input 而不是 keypress 或 keyup。