Vue 和 Vuex v-for 状态改变时不能正常更新

Question

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

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>

我用吸气剂计算数据：

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 拼接时它不能正常工作。我查看状态并看到它已更改但列表未按正确方式呈现。当我突然删除一些索引时，最后一个对象消失了，状态正常但视图看起来不正确。我如何正确呈现状态数据？

Answer 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"
/>

Vue 和 Vuex v-for 状态改变时不能正常更新

Vue and Vuex v-for not updating properly when state changes

vue.js

vue-component

vuex

vuejs2

v-for