How to access Vue Instance from within an argument function?

Question

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

Does this answer your question? Vuex: _this.$store is undefined — Estus Flask
– Estus Flask, Commented Apr 2, 2020 at 15:44

score 1 · Accepted Answer · 2020-04-02 15:36:54Z

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

Collectives™ on Stack Overflow

How to access Vue Instance from within an argument function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related