我正在使用 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 组件重新渲染之前该值不会更新。
您可以访问更新后的值keywords
在传递给的回调中this.$nextTick https://v2.vuejs.org/v2/api/#Vue-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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)