`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?

Answer 1

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;
        }
    }
}

Answer 2

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

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