Vue.js如何在v-for循环元素内删除数组项？

嘿，我来帮你搞定这个Vue里删除v-for循环项的问题！首先先提个小细节：delete是JavaScript的关键字，不能直接用作方法名，建议改成deleteItem这类合法的名称哦。

核心问题解答：能不能不获取索引直接用splice或delete？ #

关于splice： #

splice方法本身需要知道要删除项的索引位置才能工作，所以本质上还是得拿到索引，但不一定非要在模板里显式把index传给方法。你可以在方法内部通过item的唯一标识（比如id）找到对应的索引，再调用splice。

关于delete： #

绝对不推荐用JavaScript的delete操作符来删除数组项！因为Vue的响应式系统依赖数组的变异方法（splice、push、pop等）来触发视图更新，用delete只会把数组对应位置的值设为undefined，数组长度不会变，而且视图也不会同步更新，会导致数据和视图不一致的问题。

具体实现方案 #

方案1：模板中直接传索引（最直接简单） #

这种方式清晰直观，适合简单场景：

<template v-for="(item, index) in array" :key="item.id">
  {{ item.text }}
  <button @click="deleteItem(index)">Delete me!</button>
</template>

<script>
export default {
  data() {
    return {
      array: [
        { id: 1, text: '第一项' },
        { id: 2, text: '第二项' }
      ]
    };
  },
  methods: {
    deleteItem(index) {
      // splice(起始索引, 删除数量)，会触发Vue响应式更新
      this.array.splice(index, 1);
    }
  }
};
</script>

方案2：不用显式传索引，通过item找索引 #

如果不想在模板里传递index，可以通过item的唯一属性（比如id）在方法内部找到对应索引，适合item有唯一标识的场景：

<template v-for="item in array" :key="item.id">
  {{ item.text }}
  <button @click="deleteItem(item)">Delete me!</button>
</template>

<script>
export default {
  data() {
    return {
      array: [
        { id: 1, text: '第一项' },
        { id: 2, text: '第二项' }
      ]
    };
  },
  methods: {
    deleteItem(item) {
      // 通过item的唯一id找到对应的索引
      const itemIndex = this.array.findIndex(i => i.id === item.id);
      // 确保找到有效索引再执行删除
      if (itemIndex !== -1) {
        this.array.splice(itemIndex, 1);
      }
    }
  }
};
</script>

重要提醒 #

一定要给v-for加上key属性，并且优先使用item的唯一标识（比如id）作为key，而不是index。如果用index当key，删除项后后续item的索引会发生变化，可能导致Vue虚拟DOM复用出错，出现视图渲染异常的问题。

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