0

So based off this thread I implemented this snippet:

methods: {
    checkSearchString: _.debounce( string => {
         console.log("watcher firing for search!");
         console.log(this.searchInput);
        this.$emit("search", this.searchInput);
    }, 2000)
},
watch: {
    searchInput : "checkSearchString"
}

but as comments on the accepted answer pointed out, "this" does not points to the vue instance, so I can't access it. How could I access the vue instance from within the function? or how could I solve this better?

the main goal here is to use _.debounce and a watcher to fire the search when the user stops typing, and achieve that in a clean way.

Edit: Thanks for pointing the use of the arrow function as the problem of context here, the users on the other thread did point to this being the problem but I didn't get why

Community
  • 1
  • 1
Yago Massiah
  • 3
  • 2
  • Does this answer your question? [Vuex: \_this.$store is undefined](https://stackoverflow.com/questions/48799617/vuex-this-store-is-undefined) – Estus Flask Apr 02 '20 at 15:44

1 Answers1

1

you using arrow function which losing context. do it with normal anonymous function

watch: {
    searchInput : "checkSearchString"
}

methods: {
    checkSearchString: _.debounce( function(value) {
         console.log("watcher firing for search!");
         console.log(value);
        this.$emit("search", value);
    }, 2000)
},