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.

As a note, this question applies to Vue.js v1; the debounce filter was removed in v2 (details) — Chris Forrence
– Chris Forrence, Commented Jul 24, 2017 at 17:01

tony19 · Accepted Answer · 2022-07-15 20:18:57Z

11

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.

edited Jul 15, 2022 at 20:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 21, 2018 at 18:05

Vignesh M

5595 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harvey A. Ramer Over a year ago

If we can avoid more 3rd party dependencies, it seems wise. Why not use Vue.options.filters.debounce or a manual debounce like this example? stackoverflow.com/questions/37587800/…

Vignesh M Over a year ago

As pointed in the answer, debounce support is now removed. If you don't prefer 3rd party library, you can always write it on our own.

Samuel De Backer · Accepted Answer · 2015-09-07 17:36:39Z

6

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">

answered Sep 7, 2015 at 17:36

Samuel De Backer

3,4602 gold badges28 silver badges39 bronze badges

2 Comments

Douglas.Sesar Over a year ago

With my first example, I am definitely firing the ajax function on every keyup no matter how fast/slow I type. Is there something else I could be missing?

Douglas.Sesar Over a year ago

I must have something else wrong; I have tested in jsFiddle and my syntax from the first example works. jsfiddle.net/tpgcsdq9/1

Ben Winding · Accepted Answer · 2019-12-09 05:59:08Z

5

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),
}

answered Dec 9, 2019 at 5:59

Ben Winding

12k5 gold badges92 silver badges80 bronze badges

Comments

Alexey Matveev · Accepted Answer · 2020-03-25 12:24:51Z

0

Those who are using Quasar (based on Vue.JS) can use Quasar's own implementation of debounce (maybe Quasar expose Lodash's debounce, I don't know).

Open debouce section in Q docs

answered Mar 25, 2020 at 12:24

Alexey Matveev

3912 silver badges7 bronze badges

Collectives™ on Stack Overflow

How do I use Vue.js debounce filter?

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related