How to correctly use Vue JS watch with lodash debounce

Question

I'm using lodash to call a debounce function on a component like so:

... import _ from 'lodash';  export default {     store,     data: () => {         return {             foo: "",         }     },      watch: {         searchStr: _.debounce(this.default.methods.checkSearchStr(str), 100)     },      methods: {         checkSearchStr(string) {             console.log(this.foo) // <-- ISSUE 1             console.log(this.$store.dispatch('someMethod',string) // <-- ISSUE 2         }     } } 

• Issue 1 is that my method checkSearchStr doesn't know about foo
• Issue 2 is that my store is undefined as well

Why doesn't my method know this when called through _.debounce? And what is the correct usage?

Answer 1

Your watch should look like this.

watch: {     searchStr: _.debounce(function(newVal){       this.checkSearchStr(newVal)     }, 100) }, 

This is a bit unusual, however. I don't see why you would want to debounce a watch. Possibly you would rather just debounce the checkSearchStr method.

watch: {     searchStr(newVal){       this.checkSearchStr(newVal)     } },  methods: {     checkSearchStr: _.debounce(function(string) {         console.log(this.foo)          console.log(this.$store.dispatch('someMethod',string))      }, 100) } 

One other thing I would like to point out; no where in the code is searchStr defined. When you watch a value with Vue, you are watching a data or computed property. As you have currently defined it, the watch on searchStr will never execute.