Vue V-for binding array到错误的组件

Question

在我的Vuex状态中，我有一个包含orderLines数组的对象，在我的模型中，我使用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，这将是一个更好的关键。