时间戳

首页 > 解决方案 > v-for 组件不会实时更新

vue.js - v-for 组件不会实时更新

问题描述

我有一个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。

标签： vue.jsvuejs2vuex

解决方案

这里有几个问题：

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

推荐阅读