Vue.js删除数组元素后v-for未更新视图问题求助

问题根因 #

你的问题核心出在v-for使用了索引作为key值：
当你删除数组中某一项时，后续所有元素的索引都会整体前移1位，Vue的diff算法通过key判断组件是否需要复用，此时Vue会认为仅删除了数组最后一项，前面的组件全部复用，而子组件的表单状态存储在自身data中，仅在beforeMount生命周期同步一次父组件传入的data，复用的组件不会重新触发初始化逻辑，就会出现数组数据正确但视图删除错误的问题。

解决步骤 #

1. 为每个规则项添加唯一标识 #

修改父组件NewTask.vue的addRule方法，给新增的规则项加全局唯一ID，这里用时间戳加随机数避免快速点击生成重复ID：

addRule() {
  const new_rule = {
    // 新增唯一ID字段
    id: `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
    type_input_text: null,
    type_input_show: null,
    rule_input_text: null,
    rule_input_show: null,
  }
  this.rules.push(new_rule)
}

2. 修改v-for的key为唯一标识 #

将父组件模板中v-for绑定的key从索引改为每个规则项的唯一ID：

<new-rule v-for="(item, index) in rules"
          <!-- 替换原来的JSON.stringify(index) -->
          :key="item.id"
          v-on:remove-rule="removeRule(index)"
          :data="item" :index="index"
          v-on:data-changed="dataChanged"
          class="mb-2"/>

可选优化（非必须） #

你现有代码中dataChanged、removeRule方法里的this.rules = rules可以删掉，splice是Vue支持监听的数组变异方法，直接操作就可以触发响应式更新，不需要重新赋值数组。

内容的提问来源于stack exchange，提问作者DeadSec