`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这里的语法,在文档告诫在这里:

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

所以你的代码应该是:

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