can't access data variables in watch handler vuejs

Question

I\'m trying to set a data variable in a watch handler function for an input field in a VueJs Component. I have something like this:

data() {
    return {
            


        

Answer 1

To avoid additional binding, just avoid using the arrow function syntax here.Instead go with ES6 Object shorthands:

watch: {
    dates: { 
        handler(date) {
            console.log(this.params)
            if (date.start) {
                this.params.from = moment(date.start, "YYYY/MM/DD")
            }
            if (date.end) {
                this.params.to = moment(date.end, "YYYY/MM/DD")
            }
        },
        deep: true
    }
}

Now this will be bound to the correct context by default.

Answer 2

Let's try bind this to your handler

        handler(date) {
            console.log(this.params)
            if (date.start) {
                this.params.from = moment(date.start, "YYYY/MM/DD")
            }
            if (date.end) {
                this.params.to = moment(date.end, "YYYY/MM/DD")
            }
        }.bind(this)