Vue.js 为何无法删除数组所有元素且界面卡片不动态更新？

问题根因与解决方法 #

• v-for key设置错误
  如果你渲染卡片的v-for指令绑定的key是数组下标index，删除某一项后数组下标会自动重排，Vue会复用原有的DOM节点，导致看起来对应卡片没有被删除。你需要将key替换为每个卡片条目唯一的标识（比如条目自带的id字段，没有的话可以生成唯一UUID作为标识），不要用数组下标作为key。
• 数组响应式更新不符合Vue规则
  如果你直接通过下标修改数组项（比如formNames[index] = {}）、或者直接修改数组长度来删除项，Vue无法触发响应式更新。删除数组项请使用splice方法处理：

  // deleteIndex是要删除的条目下标
  formNames.splice(deleteIndex, 1)
  

  如果是Vue2项目也可以配合this.$set处理更新，保证修改能触发响应式渲染。
• 删除事件传递链路中断
  你的组件是三层嵌套结构，删除按钮在最内层的ISOAdminDivFormNameItem组件，需要确保删除事件能逐层向上传递到持有数据源的顶层父组件：
  1. 内层ISOAdminDivFormNameItem点击删除按钮时，emitdelete事件，把当前条目的唯一ID/下标传递给父级ISOAdminDivFormName
  2. ISOAdminDivFormName收到删除事件后，继续向上emit给顶层ISOAdminDivForm
  3. 顶层组件修改数据源后，新的数组会通过props向下传递，触发所有子组件重新渲染
• 子组件未监听props变化
  如果子组件拿到props后将其转成了本地的data/state存储，没有监听props变化同步更新本地值，父组件修改props后子组件也不会更新。如果不需要在子组件内部缓存临时修改，直接用props渲染即可；如果需要转成本地状态，要加watch监听props变化，同步更新本地状态。

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