web-dev-qa-db-ja.com

`this`はvue.jsウォッチャーでは定義されていません

ウォッチャー付きのコンポーネントがあります

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であるためです。

どうして？

vue.jsvuejs2
27
Jackson J

ドキュメントで警告されているように、ここではfunction構文を使用する必要があります here ：

ウォッチャーの定義にアロー関数を使用しないでください（例：searchQuery：newValue => this.updateAutocomplete（newValue））。その理由は、矢印関数が親コンテキストをバインドするため、これはVueインスタンスではなく、予想どおりthis.updateAutocompleteが未定義になるためです。

したがって、コードは次のようになります。

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