[解決済み】Vue 2 - プロップの変異 vue-warn

質問

私は https://laracasts.com/series/learning-vue-step-by-step のシリーズです。レッスンで止めた Vue、Laravel、そしてAJAX というエラーが出てしまいます。

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

私はこのコードを main.js

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

にあることは知っています。 created() を上書きしてしまったのですが、私はVueの初心者なので、どう直せばいいのか全く分かりません。どなたか修正方法をご存知の方（理由も教えてください）いらっしゃいませんか？

解決方法は？

ということと関係があります。 ローカルでプロップを変更することは、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 と 反応性 をご覧ください。 これ スレッド