Use Vue.js 3 with lodash debounce function

Question

Is there any solution to use lodash debounce on method? I also need 'this' in the function. Example:

data() {
    info: 'Read Me!'
},
methods: {
  readData() {
      console.log(this.info)
  }
}

In Vue2 I could use:

methods: {
  readData: debounce(function() {
      console.log(this.info)
  }, 500)
}

Boussadjra Brahim · Accepted Answer · 2020-10-03 16:42:17Z

7

Your data property should be a function that returns an object :

data() {
   return{
    info: 'Read Me!'
   }
},

and write your method by giving a name to the debounce callback :

methods: {
  readData: debounce(function debounceRead() {
      console.log(this.info)
  }, 500)
}

answered Oct 3, 2020 at 16:42

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Answer 1