How do I use Vue.js debounce filter?
debounce filter has been removed.
Use lodash’s debounce (or possibly throttle) to directly limit calling the expensive method. You can achieve the expected result like this:
<input v-on:keyup="doStuff">
methods: {
doStuff: _.debounce(function () {
// ...
}, 500)
}
From documentation.
Your first example is correct:
<input v-model="myInput" v-on="keyup: someAjaxFunction | debounce 500">
With Vue.js 1.0.0-beta.x, the new syntax is:
<input v-model="myInput" on-keyup="someAjaxFunction | debounce 500">
Another method is to debounce the v-model, instead of calling a method.
You can also just create your own debounce function, without any dependencies:
Reusable debounce function
export function debounce (fn, delay) {
var timeoutID = null
return function () {
clearTimeout(timeoutID)
var args = arguments
var that = this
timeoutID = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
In your Vue component
data: () => ({
textModel: 'something'
}),
watch {
textModel: debounce(function(newVal) {
this.searchTextDebounced = newVal;
}, 500),
}