Vue 和 Vuex v-for 在状态更改时无法正确更新答案

【问题标题】：Vue and Vuex v-for not updating properly when state changesVue 和 Vuex v-for 在状态更改时无法正确更新
【发布时间】：2021-06-05 20:11:45
【问题描述】：

这是我的存储和删除突变。

const store = new Vuex.Store({
  state: {
    todos: [
      {
        date: "22/03/1994",
        todos: [
          { icon: 0, text: "seyehate çıkılacak " },
          { icon: 0, text: "seyehate çıkılacak " },
        ]
      },
      .....
    ]
  },

  getters: {
    getTodos: state => {
      return state.todos
    }
  },

  mutations: {
     delete(state, { dateIndex, index }) {
      console.log("dateIndex", dateIndex)
      if (state.todos[dateIndex].todos.length == 1) {
        state.todos.splice(dateIndex, 1)
      } else {
        state.todos[dateIndex].todos.splice(index, 1)
      }
    }
  },
})

这是我的主要组件：

<ListDate
  v-for="(item, index) in list"
  :key="index"
  :todos="item"
  :dateIndex="index"
></ListDate>

我用 getter 计算数据：

computed: {
  list() {
    return this.$store.getters.getTodos;
  },
},

在我的 ListDate 组件中：

<ListItem
  v-for="(item, index) in dateTodos"
  :key="index"
  :message="item.text"
  :icon="item.icon"
  :dateIndex="dateIndex"
  :index="index"
/>

在这个组件中，我提交了删除突变。它可以工作，但是当我与 dateIndex 拼接时，它不能正常工作。我查看状态，我看到它已更改，但列表未以正确的方式呈现。当我删除一些索引突然最后一个对象消失时，状态正常但视图看起来不正确。如何正确呈现状态数据？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex v-for

【解决方案1】：

由于您的v-for 使用index 作为key，因此当您删除一个项目时，下一个项目会滑入它的位置，并且 DOM 会被重用。

您需要在对象上创建一个真正唯一的属性以用作键，例如 id：

todos: [
  { id: 1, icon: 0, text: "seyehate çıkılacak " },
  { id: 2, icon: 0, text: "seyehate çıkılacak " },
]

将该属性用作key：

<ListItem
  v-for="(item, index) in dateTodos"
  :key="item.id"
  :message="item.text"
  :icon="item.icon"
  :dateIndex="dateIndex"
  :index="index"
/>

【讨论】：