vue.js keyup, keydown 事件落后一个字符

Question

我正在使用调用 javascript 函数的 keydown/keyup 事件，该函数将输入框的值打印到控制台（以及事件的 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);
    }

原文由 farbodg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 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>

原文由 thanksd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

真正的问题根本与 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);
       }
    }
  }

看看它的实际效果

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议