Vue.js v-for 循环绑定数组中的项目对象并在更改时更新

Posted 2023-02-23

【中文标题】Vue.js v-for 循环绑定数组中的项目对象并在更改时更新

【英文标题】：Vue.js v-for loop binding items objects in array and update on change

【发布时间】：2021-01-30 08:02:23

【问题描述】：

我有一个组件，并且正在使用 v-for 循环循环并在我的应用程序的 $root 级别使用对象数组来填充列表。

在我的应用程序的其他组件中，我将 EventBus.$emit 数据来更新我数据库中的表。这意味着 $root 数组数据更新。

有没有办法绑定或映射我创建的v-for 列表以使用索引或其他方法检测和更新？

这是示例循环和示例$root 数据。

我想我希望有一种方法可以使用 [index] 连接数组中的对象

<v-list-item-content v-if="this.$root.people">
  <div v-for="(item, index) in this.$root.people" :key="item.id">
    <div>
      <span v-html="this.$root.people[index].value"></span>
    </div>
  </div>
</v-list-item-content>

我的数组看起来像这样。

people:Array[2]
 0:Object
  event_id:6
  submission_values:Array[4]
   0:Object
    value:"Danny"
   1:Object
   2:Object
   3:Object

【参考方案1】：

我想如果people 已经是响应式的，那么你应该看看你是如何更新这个数组的。在 VueJS 中更新响应式数组有一些注意事项，请查看 the official documentation