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

Posted 2023-02-23

【中文标题】删除当前元素后 v-for 列表更新不正确

【英文标题】：v-for list is updated incorrectly after removing current element

【发布时间】：2020-08-08 23:50:58

【问题描述】：

请你帮帮我，我不知道如何处理。我有项目列表，其中每个项目都是一个组件，并且有自己的删除按钮。此按钮发出删除事件，将当前项目的键提交到 vuex 存储。因此，在我的 vuex 存储中，只发生了数组拼接。数组本身很好。但是 DOM 只显示最后一次删除 row ，而不是我点击。我在每个组件中都使用了 key，例如 vue documentation 。但我的代码仍然不起作用。 CentralPanel.vue(父)

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(子)

// 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);

【问题讨论】：

到目前为止您展示的内容应该可以工作。这意味着问题不在您到目前为止显示的代码中。请创建一个minimal reproducible example 以便其他人帮助您找到错误的根源。如果您需要基于多文件节点的环境，请使用 codesandbox.io（或类似的）。

我会告诉你谢谢！

【参考方案1】：

我相信，这是由 v-for 中的错误键引起的。我看到您正在迭代一个数组（因为您使用了拼接）所以第二个参数不是key - 它是index。

Vue通过key的属性区分循环中的元素。当您使用索引作为键时，它无法很好地跟踪项目。将其更改为每个元素的唯一值，例如good.someUniqueAttribute

此案例有描述：Why not always use the index as the key in a vue.js for loop?

【讨论】：

哦，非常感谢！我使用 Date().getTime() 作为我在项目对象中的唯一属性现在可以了 :))