☰

Vue 2 - プロパティの変更 vue-warn 質問する

tag-icon • tag-icon javascript vue.js vuejs2
Vue 2 - プロパティの変更 vue-warn 質問する

始めたhttps://laracasts.com/series/learning-vue-step-by-stepシリーズ。Vue 、Laravel、AJAX のレッスンで次のエラーが発生して停止しました。

vue.js:2574 [Vue 警告]: 親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロパティを直接変更することは避けてください。代わりに、プロパティの値に基づいてデータまたは計算プロパティを使用してください。変更されるプロパティ: "list" (コンポーネント内にあります)

main.jsにこのコードがあります

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

リスト プロパティを上書きするときにcreated()に問題があることはわかっていますが、私は Vue の初心者なので、修正方法がまったくわかりません。修正方法を知っている人はいますか (また、その理由も教えてください)?

ベストアンサー1

これは、プロパティをローカルで変更することは、Vue 2 ではアンチパターンと見なされます。

プロパティをローカルで変更したい場合に今行うべきことは、値を初期値としてdata使用するフィールドを宣言し、そのコピーを変更することです。props

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

詳細については、Vue.js 公式ガイド

注1:​​ご注意ください同じ名前を使用しないでくださいprop。dataつまり：

data: function () { return { list: JSON.parse(this.list) } } // WRONG!!

注2 :混乱があるように感じますprops反応性に関しては、以下をご覧になることをお勧めします。これ糸

おすすめ記事