问题描述
我在 Vue 模板中有一个简单的输入框,我想或多或少像这样使用去抖动:
I have a simple input box in a Vue template and I would like to use debounce more or less like this:
<input type="text" v-model="filterKey" debounce="500">
然而,debounce
属性在 Vue 2 中已被弃用.建议只说:使用 v-on:input + 3rd party debounce function".
However the debounce
property has been deprecated in Vue 2. The recommendation only says: "use v-on:input + 3rd party debounce function".
您如何正确实施它?
我尝试使用 lodash、v-on:input 和 v-model 来实现它,但我想知道它是否无需额外变量即可实现.
I've tried to implement it using lodash, v-on:input and v-model, but I am wondering if it is possible to do without the extra variable.
在模板中:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本中:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
随后在 computed
道具中使用过滤器键.
The filterkey is then used later in computed
props.
推荐答案
我正在使用 debounceNPM 包并实现如下:
I am using debounce NPM package and implemented like this:
<input @input="debounceInput">
methods: {
debounceInput: debounce(function (e) {
this.$store.dispatch('updateInput', e.target.value)
}, config.debouncers.default)
}
使用 lodash 和问题中的示例,实现如下所示:
Using lodash and the example in the question, the implementation looks like this:
<input v-on:input="debounceInput">
methods: {
debounceInput: _.debounce(function (e) {
this.filterKey = e.target.value;
}, 500)
}
这篇关于如何在 Vue2 中实现去抖动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!