Vue V-for 绑定数组到错误的组件

Question

在我的 Vuex 状态下，我有一个包含 orderLines 数组的对象，在我的模型中，我使用 getter 访问该对象并遍历为每个组件创建的 orderLines。

现在，当我触发删除突变时，我也请求更新订单对象，并将旧的替换为正确的新的。到目前为止一切顺利..我的所有组件都获得了新的订单对象并更新了它们的列表。

但它们没有 Create/Recreate 循环中的组件它们似乎只是更新索引 -> 导致下一个问题：

如果我删除最上面的项目，所有下一个项目的数据都绑定到 'removed' 组件及其状态：/

       <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 那将是一个更好的密钥。

Vue V-for binding array to wrong components