Vue.js は、i がメソッド変数であってもプロパティを更新します

Question

2 つの配列 (1 つはプロップから、もう 1 つはコンポーネントから) を比較する次のメソッドがあります。 props 配列には存在するが、component 配列には存在しないすべての要素を 3 番目の配列に挿入し、「destroy: true」というプロパティを追加して、バックエンドに送信できるようにします。データベースから削除します。

ただし、何らかの理由で、メソッドで使用する変数の代わりにプロパティが更新されます。プロップを直接参照していないので、なぜこれが起こっているのかよくわかりませんが、その内容をメソッド内の変数にコピーしています。

リーリー

なぜこのようなことが起こるのでしょうか?コンポーネント内の他の要素は正常に動作しますが、この要素だけが問題を抱えています。

Answer 1

はい、this.props.array 配列の 要素 を新しいメソッドのローカル配列にコピーしていますが、配列の要素はオブジェクトであるため、最終的には配列にはすべて 同じ オブジェクト ( オブジェクト への参照)

が含まれています。

スプレッド演算子を使用できます let newElement = { ...element }元の要素の 浅いコピーを作成します - これにより、完全に新しいオブジェクトが作成され、元の要素がコピーされますすべてのプロパティ。ただし、元のオブジェクトのプロパティに配列/オブジェクトが含まれている場合は、同じ問題に直面することになることに注意してください...もう少し深い問題です