v-for 组件不会实时更新

Posted 2023-02-16

【中文标题】v-for 组件不会实时更新

【英文标题】：v-for components don't update in real time

【发布时间】：2021-12-16 01:33:18

【问题描述】：

我有一个父组件Data，它从 Vuex 获取状态，我使用该状态生成一些子组件 Table，我将一些 Vuex 数据作为道具传递给它们，所有这些都在 v-for 中。

<template>
  <table v-for="(item,index) in data"
  :key="index + item.id"
  :propX="item.x"
  :propY="item.y"
  />
</template>
<script>
  name: "Data",
  components: 
   Table
  ,
  computed:
    data()
    return this.$store.state.data;  
   
  
</script>

我的 Table 组件也改变了 Vuex 状态，我可以看到状态在 Data 组件（vue 开发工具）中变化得很好，但是 Data 组件不会更新我的 Table 的 props组件。

【问题讨论】：

建议不要使用table等保留的html元素名称，尝试MyTable和模板my-table

vue 2 list problem?如果是的话，你可以看到它。

我遇到了类似的问题，如果孩子的道具用于在组件中呈现，或者是在组件中呈现的计算值的一部分，则它们只会被更新。能否提供组件代码？

另一方面：为什么不只通过 props 将静态字段（例如：item.id）传递给组件，并让它自己从给定 id 的存储中获取数据。这样你就不用依赖父母来传递状态变化了。

【参考方案1】：

这里有几个问题：

不要为组件和计算值使用保留名称（不要使用table） 请注意，如果您的状态是对象数组或嵌套对象，则它可能不是反应式的。您必须重新分配对象/数组或使用 set 方法使其具有反应性。

一些例子

// update objects
this.$set(this.$store.state.data, 'a', 1)
Vue.set(this.$store.state.data, 'a', 1)
this.$store.state.data = Object.assign(, oldObject,  a: 1 )

//update array of objects
this.$store.state.data = [...data, newObject]