`This` is undefined in vue.js watcher

Question

I have component with watcher

props: {
    propShow: { required: true, type: Boolean }
},

data() {
    return {
        show: this.propShow
    }
},

watch: {
    propShow: {
        handler: (val, oldVal) => {
            this.show = val;
        }
    }
}

Whenever parent component changes propShow this component must update it's show property. This component also modifies show property, that's why I need both: show and propShow, because Vue.js does not allow to change properties directly.

This line

this.show = val;

causes error

TypeError: Cannot set property 'show' of undefined

because this inside handler is undefined.

Why?

tony19 · Accepted Answer · 2022-07-15 19:41:02Z

110

You will have to use function syntax here, as warned in the docs here:

Note that you should not use an arrow function to define a watcher (e.g. searchQuery: newValue => this.updateAutocomplete(newValue)). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.updateAutocomplete will be undefined.

So your code should be:

watch: {
    propShow: {
        handler: function(val, oldVal) {
            this.show = val;
        }
    }
}

edited Jul 15, 2022 at 19:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 15, 2017 at 7:11

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

2 Comments

Rutwick Gangurde Over a year ago

Thanks! Any idea how to write a setter for a singular, as in not derived out of other properties, computed property?

Dmitry Polushkin Over a year ago

object's handler keyword can be dropped.

Max · Accepted Answer · 2022-04-05 15:00:49Z

1

"function" is not es6 code, you should better write:

watch: {
    propShow: {
        handler(val, oldVal) {
            this.show = val;
        }
    }
}

answered Apr 5, 2022 at 15:00

Max

3723 silver badges9 bronze badges

Collectives™ on Stack Overflow

`This` is undefined in vue.js watcher

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related