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

Question

我有观察员的组件

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。

为什么？

Answer 1

您必须在此处使用function语法，如文档here中所述：

  

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

所以你的代码应该是：

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