Vue和Vuex v-当状态改变时没有正确更新

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>

我用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"
/>

在这个组件中，我提交了delete mutation。它的工作，但当我拼接与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"
/>