How do I use Vue.js debounce filter?

Question

I am trying to use the the debounce filter as per the Vue.js docs so I can prevent firing an Ajax function while the user is typing into an input. In the past, I have used setTimeout to manually prevent sending the request after each letter is entered and to use a resetting delay, but I would like to do it the Vue.js way.

Here is what I tried:

<input
v-model="myInput"
v-on="keyup: someAjaxFunction | debounce 500"
>

No examples are given in the docs specifically for this filter. Am I even putting the filter in the right place?

debounce

this filter only works with v-on

this filter takes one optional argument

Wrap the handler to debounce it for X milliseconds, where X is the argument. Default is 300ms. A debounced handler will be delayed until at least X ms has passed after the call moment; if the handler is called again before the delay period, the delay poriod is reset to X ms.

I have also tried this: ( because the docs mention "Wrap the handler..." )

<input
v-model="myInput"
v-on="keyup: debounce( someAjaxFunction, 500 )"
>

I could really use an example.

Answer 1

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.