https://laracasts.com/series/learning-vue-step-by-step シリーズを開始しました。次のエラーが発生して、Vue、Laravel、AJAX クラスを停止しました:
vue.js:2574 [Vue の警告]: 親コンポーネントが再レンダリングされるたびに値が上書きされるため、props を直接変更しないでください。代わりに、プロパティの値に基づいてデータまたは計算されたプロパティを使用します。小道具の変更: "list" (コンポーネント内にあります)
このコードは main.js
にあります リーリーリスト プロパティをオーバーライドするときに問題が created() にあることはわかっていますが、Vue を初めて使用するため、問題を修正する方法がまったくわかりません。誰かがそれを修正する方法（そしてその理由を説明してください）を知っていますか？
P粉7152740522023-10-14 09:15:14
Vue モードは、props がダウン、events がアップです。簡単そうに聞こえますが、カスタム コンポーネントを作成するときに忘れがちです。
Vue 2.2.0 以降では、v -model ( 計算されたプロパティ を使用) を使用できます。この組み合わせにより、コンポーネント間にシンプルでクリーンで一貫したインターフェイスが作成されることがわかりました:
props は応答性を維持します (つまり、コンポーネントは複製されず、変更が検出されたときにローカル コピーを更新するために watch 関数も必要ありません)。 。 < /里>
計算されたプロパティを使用すると、セッターとゲッターを個別に定義できます。これにより、Task コンポーネントを次のように書き換えることができます:
model プロパティは、関連付けられた prop と v-model、および変更時にどのイベントが発行されるかを定義します。次に、次のように親コンポーネントからこのコンポーネントを呼び出すことができます:
listLocal 計算プロパティは、コンポーネント内で単純なゲッターおよびセッター インターフェイスを提供します (プライベート変数と考えてください)。 #task-template では、listLocal をレンダリングでき、リアクティブなままになります (つまり、parentList が変更されると、Task< /代码> コンポーネントが更新されます)。 。また、セッター (例: this.listLocal = newList) を呼び出して listLocal を変更することもできます。これにより、変更が親に送信されます。
このパターンの利点は、listLocal を Task の子コンポーネント (v-model を使用) に渡して、子コンポーネント コンテンツは最上位コンポーネントに伝播されます。
たとえば、タスク データに何らかの変更を加える別の EditTask コンポーネントがあるとします。同じ v-model と計算されたプロパティ パターンを使用することで、(v-model を使用して) listLocal をコンポーネントに渡すことができます。
リーリー
が変更を発行すると、listLocal で set() が適切に呼び出され、それによってイベントが最上位に伝播されます。同様に、EditTask コンポーネントも v-model を使用して他のサブコンポーネント (フォーム要素など) を呼び出すことができます。
P粉2686548732023-10-14 00:33:06
これは、プロップをローカルで変更することが Vue 2 ではアンチパターンとみなされているという事実と関係があります。
プロパティをローカルで変更したい場合は、初期値として props code> value を使用して data でフィールドを宣言し、コピーを変更します。
詳しくは、Vue.js 公式ガイドをご覧ください。
注 1: prop と data には を使用しないでください。 ＃ ＃＃、今すぐ：＃＃＃
リーリー
注 2: props と
については いくつかの混乱があると思うので、# を参照することをお勧めします。 ##この スレッド