vue.js keyup，keydown事件背后有一个角色

Question

我正在使用keydown / keyup事件调用一个javascript函数，它将输入框的值输出到控制台（以及事件的currentTarget字段的值），我注意到它是一个字符后期。例如，如果我在输入框中输入 hello ，我只会在控制台中看到地狱，直到我按下另一个键然后我看到 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

因为您依赖于输入的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>

Answer 2

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

问题隐藏在keydown事件的后面！

因此，在事件触发时，输入值尚未更新。 Fiddle example

MDN - keydown event

通常，keydown用于通知您按下了哪个键。您可以像这样访问它：

document.addEventListener('keydown', logKey);

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

---

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

我的建议是使用:value和@input事件使用custom v-model。

<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);
       }
    }
  }

See it in action

Answer 3

当前接受的答案是旧版本的vue，在最新版本中，应使用@input代替keypress或keyup。