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.