v-for 组件不实时更新

Question

我有一个从 Vuex 获取状态的父组件 Data，我使用该状态生成一些子组件 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 开发工具）中很好地改变，但数据组件不会更新我的 Table 个组件的道具。

Answer 1

这里有几个问题：

不要对组件和计算值使用保留名称（不要使用 table）
请注意，如果您的状态是对象数组或嵌套对象，则它可能不是反应式的。您必须重新分配 object/array 或使用 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]

v-for 组件不实时更新

v-for components don't update in real time

vue.js

vuex

vuejs2