删除当前元素后，v-for列表更新不正确。

Question

请你帮帮我，我不知道如何处理这个问题，我有一个带项目的列表，每个项目都是一个组件，有自己的删除按钮，这个按钮发出删除事件，将当前项目的键提交到vuex商店。我有一个带项目的列表，其中每个项目都是一个组件，并且有自己的删除按钮，这个按钮会发出删除事件，将当前项目的键提交到vuex存储中，因此在我的vuex存储中只发生了数组的拼接。数组本身是正常的。但是DOM只显示最后删除的行，而不是我点击的行。我在每个组件中都使用了key，比如 vue文件 . 但我的代码仍然无法工作。CentralPanel.vue(Parent)

div(v-for="(good,key) in goods" :key="key")
        goodItem(:goodProps="good" :goodsLength="goods.length" @update-row="updateChildRow($event)" @delete-item="$store.commit('goods/delete_current_good',key)")

GoodItem.vue(child)

// All above just inputs
v-btn(@click="$emit('delete-item')" style={marginTop:'13px'})
        v-icon mdi-trash-can-outline

商店

delete_current_good : (state,key) => {
    let goodsArr = state.goodsArray;
    goodsArr.splice(key,1);
}

Answer 1

我相信，这是由于v-for中的一个坏键造成的。我看到你是在一个数组上迭代（因为你使用了拼接），所以第二个参数并不在你的范围内。key - 它 index.

通过key的属性，Vue可以区分循环中的元素。当你使用index作为键时，它不能很好地跟踪项目。将其改为每个元素都有唯一的值，例如：. good.someUniqueAttribute

这种情况下有描述。为什么不在vue.js的循环中一直使用index作为key呢？