Vue点击按钮删除动态输入项仅删除最后一项如何解决

问题根源 #

你遇到的问题核心原因是v-for用了数组下标index作为key值。Vue的虚拟DOM Diff算法依赖key识别节点的唯一性：当你删除数组中间某一项时，后面所有项的下标会整体前移1位，Vue会判定是最后一个下标的节点被删除，同时复用前面的节点渲染，最终表现就是永远删除最后一项、内容错位。

解决方案 #

给每个inputs数组的项配置全局唯一ID，用这个ID作为v-for的key即可解决问题，同时你模板里的折叠触发器标识也需要同步修改为唯一值，避免多个折叠项冲突。

修改后的模板代码

<template>
  <div >
    <!-- 把key从index替换为数组项的唯一id -->
    <div class="mt-2" v-for="(item, index) in inputs" :key="item.id">
      <div class="row mb-3">
        <b-button-group class="col-md-12">
          <!-- 折叠触发器id拼接唯一标识，避免冲突 -->
          <b-button class="col-md-8" v-b-toggle="`toggle-${item.id}`" variant="danger"></b-button>
          <b-button @click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
        </b-button-group>
      </div>
    </div>

    <div>
      <b-button @click="addInput()">Add Input</b-button>
    </div>
  </div>
</template>

修改后的脚本代码

<script>
export default {
  name: 'test',

  data() {
    return {
      inputs: [{
        id: Date.now(), // 初始化项新增唯一id
        name: "",
      }],
    }
  },

  methods: {
    deleteInput(index) {
      this.inputs.splice(index, 1)
    },
  
    addInput() {
      this.inputs.push({
        id: Date.now(), // 新增项自动生成唯一id，业务场景也可以用自增计数器实现
        name: "",
      })
    },
  },  
}
</script>

修改后子元素绑定的name属性也会和对应数组项正确绑定，不会再出现内容错位的问题。

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