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

vue.js Vue.js

梅小宇宙

2020-03-12

我有观察者组件

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。

为什么？

第1103篇《在vue.js观察器中未定义\`this\`》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
理查德Itachi 2020.03.12

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

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

因此，您的代码应为：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android