Vue V-用于将数组绑定到错误的组件

Posted 2023-02-23

【中文标题】Vue V-用于将数组绑定到错误的组件

【英文标题】：Vue V-for binding array to wrong components

【发布时间】：2017-11-24 03:19:31

【问题描述】：

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

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

但他们没有在循环中创建/重新创建组件，他们似乎只是更新索引 -> 导致下一个问题：

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

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

【参考方案1】：

使用key。

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

如果每个 order_line 都有一个 id，那将是一个更好的键。