CODEWITHSUNDEEP
typescriptvue.jslodashwatch
Vadim Rulev
Vadim Rulev

Reputation: 83

How to use Lodash debounce in VueJs watch with Typescript

In VueJS (Javascript) I can do this:

import debounce from "lodash/debounce";

...

watch: {
  variable: debounce(function() {
    console.log('wow');
  }, 500)
}

In VueJS (Typescript) I try:

npm i lodash-es
npm i @types/lodash-es -D

In component:

import { Component, Vue, Watch } from "vue-property-decorator";
import debounce from "lodash-es/debounce";

...

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

But I get errors:

P.S. This works fine:

func = debounce(() => {
    console.log('wow');
}, 500)

Upvotes: 8

Views: 9449

Answers (2)

Estus Flask
Estus Flask

Reputation: 222319

@Watch("variable")
debounce(function() {
  console.log('wow');
}, 500)

isn't a correct syntax. A decorator is supposed to be applied to class member but no name was specified.

There's no straightforward way to use Lodash debounce with Watch decorator because the latter is supposed to be used with prototype method.

It's possible to make it a decorator and chain them but this will likely result in undesirable behaviour because debounce interval will be shared through prototype method between all component instances:

function Debounce(delay: number) {
  return (target: any, prop: string) => {
    return {
        configurable: true,
        enumerable: false,
        value: debounce(target[prop], delay)
    };
  }
}

...
@Watch('variable')
@Debounce(500)
onVariable() { ... }
...

This likely should be achieved by debouncing instance method, similarly to how the documentation suggests:

...
created() {
  this.onDebouncedVariable = debounce(this.onDebouncedVariable, 1000);
}

@Watch('count')
onVariable() {
    this.onDebouncedVariable();
}

onDebouncedVariable() { ... }
...

Upvotes: 12

Séverin Beauvais
Séverin Beauvais

Reputation: 129

You can use this: https://www.npmjs.com/package/vue-debounce-decorator

And then do this:

  @Watch('value')
  @Debounce(300)
  private onValueChanged (val: string): void {
    // do your thing here
  }

Upvotes: 0

Related Questions