Vue V - 配列を間違ったコンポーネントにバインドする

Question

私のVuex状態では、私のモデルでは、私のモデルでgetterを使ってそのオブジェクトにアクセスし、各コンポーネントを作成するorderLinesをループします。

削除のトリガをトリガすると、注文オブジェクトの更新も要求され、古いものと正しい新しいものが交換されます。これまでのところ、すべてのコンポーネントが新しいオーダーオブジェクトを取得し、リストを更新します。

しかし、彼らは、彼らは単に索引を更新するように見えるループ内のコンポーネントを再作成/作成していない - >次の問題があった：私は先頭の項目を削除した場合

すべての次の項目のデータがにバインドされています'削除された'コンポーネントとその状態：/

 <div v-for="orderLine in order.order_lines"> 
      <order-line :order-line="orderLine" ></order-line> 
     </div> 

Answer 1

keyを使用してください。

<div v-for="orderLine in order.order_lines" :key="orderLine"> 
     <order-line :order-line="orderLine" ></order-line> 
</div> 

各order_lineにはさらに優れたキーとなるIDが含まれているとします。