我在Vue模板中有一个简单的输入框，我想使用debounce或多或少像这样:
<input type="text" v-model="filterKey" debounce="500">
然而，在Vue 2中debounce属性已被弃用。建议只说:“使用v-on:输入+第三方反弹功能”。
如何正确地实现它?
我尝试使用lodash, v-on:input和v-model来实现它，但我想知道是否有可能没有额外的变量。
在模板:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
然后在计算道具中使用过滤键。
当前回答
我也有同样的问题，这里有一个解决方案，没有插件。
因为<input v-model="xxxx">与
<input
v-bind:value="xxxx"
v-on:input="xxxx = $event.target.value"
>
(源)
我想我可以在xxxx = $event.target.value中为xxxx赋值时设置一个debounce函数
像这样
<input
v-bind:value="xxxx"
v-on:input="debounceSearch($event.target.value)"
>
方法:
debounceSearch(val){
if(search_timeout) clearTimeout(search_timeout);
var that=this;
search_timeout = setTimeout(function() {
that.xxxx = val;
}, 400);
},
其他回答
要创建debpublished方法，你可以使用computed，这样它们就不会在组件的多个实例之间共享:
<template>
<input @input="handleInputDebounced">
<template>
<script>
import debounce from 'lodash.debouce';
export default {
props: {
timeout: {
type: Number,
default: 200,
},
},
methods: {
handleInput(event) {
// input handling logic
},
},
computed: {
handleInputDebounced() {
return debounce(this.handleInput, this.timeout);
},
},
}
</script>
你也可以让它与不受控制的v-model一起工作:
<template>
<input v-model="debouncedModel">
<template>
<script>
import debounce from 'lodash.debouce';
export default {
props: {
value: String,
timeout: {
type: Number,
default: 200,
},
},
methods: {
updateValue(value) {
this.$emit('input', value);
},
},
computed: {
updateValueDebounced() {
return debounce(this.updateValue, this.timeout);
},
debouncedModel: {
get() { return this.value; },
set(value) { this.updateValueDebounced(value); }
},
},
}
</script>
这里有一种方法
.．. <输入v模型= " searchInput " > .．. 设置(){ const searchInput = ref(null) const timeoutID = ref(null) watch(searchInput， (new, old) => { clearTimeout (timeoutID.value) timeoutID。value = setTimeout(() => { //调用搜索函数 }， 500) //毫秒 }) 返回{…} ｝
public debChannel = debounce((key) => this.remoteMethodChannelName(key), 200)
vue-property-decorator
下面是一个Vue 2组件示例，演示了如何使用debounce。
<template>
<div>
<v-btn @click="properDebounceMyMethod">Proper debounce</v-btn>
<v-btn @click="notWorkingDebounceMyMethod">!debounce</v-btn>
<v-btn @click="myMethod">normal call</v-btn>
</div>
</template>
<script lang="ts" >
import { defineComponent } from '@vue/composition-api';
import { debounce } from 'lodash';
export default defineComponent({
name: 'DebounceExample',
created() {
// debounce instance method dynamically on created hook
this.properDebounceMyMethod = debounce(this.properDebounceMyMethod, 500);
},
methods: {
properDebounceMyMethod(){
this.myMethod();
},
notWorkingDebounceMyMethod() {
debounce(this.myMethod, 500);
},
myMethod() {
console.log('hi from my method');
},
}
});
</script>
虽然这里几乎所有的答案都是正确的，如果有人正在寻找一个快速的解决方案，我有一个指令。 https://www.npmjs.com/package/vue-lazy-input
它适用于@input和v-model，支持自定义组件和DOM元素，debounce和throttle。
Vue.use(VueLazyInput) new Vue({ el: '#app', data() { return { val: 42 } }, methods:{ onLazyInput(e){ console.log(e.target.value) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/lodash/lodash.min.js"></script><!-- dependency --> <script src="https://unpkg.com/vue-lazy-input@latest"></script> <div id="app"> <input type="range" v-model="val" @input="onLazyInput" v-lazy-input /> {{val}} </div>
