在vue.js观察器中未定义`this`

我有观察者组件

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

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

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

每当parent组件更改时,propShow此组件必须更新其show属性。This组件还修改了show属性,这就是为什么我需要同时使用show的原因propShow,因为Vue.js不允许直接更改属性。

这条线

this.show = val;

导致错误

TypeError: Cannot set property 'show' of undefined

因为this内部处理程序是undefined

为什么?

理查德Itachi2020/03/12 15:57:43

你将不得不使用function这里的语法,在文档告诫在这里

请注意,您不应使用箭头功能来定义观察者(例如searchQuery:newValue => this.updateAutocomplete(newValue))。原因是箭头函数绑定了父上下文,因此这将不是您期望的Vue实例,并且this.updateAutocomplete将是未定义的。

因此,您的代码应为:

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