Vue 2 の「プロップの変異を避ける」警告を解決するにはどうすればよいですか?

Vue 2 での「プロパティの変更」警告の回避

「Vue のステップバイステップ学習」のレッスン「Vue、Laravel、および AJAX」を検討する場合シリーズでは、学習者は次のような警告に遭遇することがよくあります。

vue.js:2574 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "list" (found in component )

警告の原因

警告は、created() ライフサイクル フック内のコードが、リストプロップ。 Vue 2 では、プロパティは不変です。つまり、プロパティの値を直接変更することはできません。変更された値でプロパティを上書きすると、警告がトリガーされます。

解決策

この警告を回避するには、初期値に依存するデータまたは計算プロパティを作成する必要があります。リストプロップの。 Vue.js は、親コンポーネントの状態が変化したときにこのプロパティを反応的に更新し、コンポーネントの動作の一貫性を確保します。

コードのリファクタリング

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

ここではこの場合、リスト プロパティから mutableList データ プロパティを作成します。これは、ローカルの変更を保存するために使用されます。

追加メモ

• これを避けることが重要です。混乱を避けるために、プロパティとデータ プロパティに同じ名前を使用します。
• Vue.js のプロパティとリアクティビティを理解することは、コードの保守性を維持するために不可欠です。詳細については、公式 Vue.js ガイドを参照してください。

以上がVue 2 の「プロップの変異を避ける」警告を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。