Vue使用$set更新可删除项列表后仍不重新渲染的问题求助

这是个很典型的Vue列表渲染问题，我来帮你拆解下问题根源和解决办法：

核心问题：v-for缺少唯一key属性 #

Vue的虚拟DOM diff算法依赖key来追踪列表中每个项的身份。当你没有显式指定key时，Vue会默认用列表的索引作为key。这种情况下，删除某一项后，后续所有项的索引都会向前偏移一位，Vue会认为这些项只是位置发生了变化，会复用旧的DOM节点而不会重新渲染，这就导致你看不到删除后的列表更新。

具体修复步骤 #

1. 给v-for添加唯一key
   如果你的timeFrame对象有自身的唯一标识（比如id字段），优先使用这个标识作为key；如果暂时没有，可以考虑生成一个唯一值（比如结合时间戳或uuid）。修改后的模板代码如下：

   <template v-for="(timeFrame, index) in form.timeFrames" :key="timeFrame.id">
     <el-form-item>
       <el-button @click="removeTimeFrame(index)">
         <i class="el-icon-remove"></i>
       </el-button>
     </el-form-item>
   </template>
   

   注意：尽量不要用索引作为key，尤其是在列表会发生增删改操作时，很容易引发这类渲染问题。

2. 简化删除方法（可选但推荐）
   你的filter方法已经返回了一个全新的数组，而form本身是Vue的响应式对象，直接赋值给form.timeFrames就能触发响应式更新，不需要额外使用$set。简化后的JavaScript代码：

   removeTimeFrame(index) {
     this.form.timeFrames = this.form.timeFrames.filter((_, i) => i !== index);
   }
   

为什么添加新项会刷新？ #

当你添加新项时，列表会新增一个从未出现过的索引，Vue会识别这是一个新的项，从而创建新的DOM节点，所以你能看到页面刷新。但删除操作触发的是索引复用，就会出现你遇到的不渲染问题。

内容的提问来源于stack exchange，提问作者Thành Nguyễn Tú