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

发布于02月22日

我正在使用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);
    }

推荐答案

因为要根据输入的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>

Vue.js相关问答推荐

Vuetify 3 v-radio-group 将模型设置为 null

Vue 2 如何在全局函数中返回观察者

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

推荐答案

Vue.js相关问答推荐

Vuetify 3 v-radio-group 将模型设置为 null

Vue 2 如何在全局函数中返回观察者

vue 不重新渲染数据更改

两个div元素之间的vue2过渡

即使响应为 200，也会调用 Axios Catch

如何在 vue.js 中删除类

VueJS：向左，元素的顶部位置？

如何在 vuejs 中异步加载图像 src url？

使用 vue-property-decorator 时注册本地组件

Vue：从 Vue 实例更新组件数据

在 vue/vuex(/flux？) 中使用 ES6 类是一种反模式吗？

在 v-for 循环中使用 v-model

如何在 Vue 类组件中定义过滤器？

如何从 v-for 创建的对象中绑定多个类？

axios 拦截器响应未定义

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

在 Vue 单元测试中单击按钮时触发表单提交

在Vue中调用方法时的括号

v-bind：class 的 Vue.js 计算(computed)属性

Vuex 模块Mutations