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 {
        params: {
            // default params to 1 month
            from: new Date().setMonth(new Date().getMonth() - 1),
            to: Date.now(),
            skip: 0,
            limit: 100
        }
    }
}
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
    }
}

When I set an input for the dates variable in the view template, I get an undefined for this.params in the console log, and I get an error for trying to set this.params.from. So I tried accessing it using a method:

methods: {
    printParams() {
        console.log(this.params)
    }
}

calling it in the view template, it correctly resolves the params object.

Am I missing something here?

Belmin Bedak · Accepted Answer · 2020-09-29 07:56:46Z

45

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.

edited Sep 29, 2020 at 7:56

answered Apr 27, 2017 at 7:37

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

Comments

taile · Accepted Answer · 2017-04-27 07:40:07Z

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)

edited Apr 27, 2017 at 7:40

answered Apr 27, 2017 at 7:25

taile

2,77619 silver badges32 bronze badges

1 Comment

Ricardo Over a year ago

I went through all colours of complication trying to fix this. .bind(this) is PERFECT! Works like a charm. Thanks a million.

Collectives™ on Stack Overflow

can't access data variables in watch handler vuejs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related