从数组删除元素异常：点击删除的元素与实际删除元素不符

我帮你找到了问题的核心原因，咱们一步步拆解：

为什么删除的不是点击的附件？ #

你的代码里存在一个关键的不匹配：

• 模板中循环渲染的是计算属性attachmentsFileNames返回的文件名数组（比如"file1.jpg"）
• 但删除逻辑操作的是原始数据attachmentsArray.attachments里的完整路径数组（比如"/uploads/file1.jpg"）

当你执行删除逻辑时：

1. 首先判断this.attachmentsArray.attachments[index] === item，这里item是文件名，而原始数组元素是路径，两者肯定不相等，会进入else分支
2. 然后用this.attachmentsArray.attachments.indexOf(item)查找位置，但item是文件名，原始数组里是路径，所以indexOf会返回-1
3. 最后执行splice(-1, 1)，这个操作会删除数组的最后一个元素，这就是为什么你点击任意删除按钮，都会删掉最后一个附件的原因！

修复方案（推荐第一种，更简洁可靠） #

方案一：直接利用索引操作原始数组 #

因为计算属性attachmentsFileNames是基于attachmentsArray.attachments生成的，两者的索引是完全对应的，所以我们可以直接传递索引来删除：

1. 修改模板中的点击事件，只传递索引：

<button @click.prevent="deleteMediaAttachment(index)">Delete me!</button>

2. 简化deleteMediaAttachment方法：

deleteMediaAttachment: function(index) {
  // 直接用索引删除原始数组对应位置的元素
  this.attachmentsArray.attachments.splice(index, 1);
}

这样完全避免了文件名和路径不匹配的问题，代码更简洁，性能也更好。

方案二：通过文件名匹配原始路径（不推荐，存在重名风险） #

如果你一定要基于文件名来删除，可以通过提取路径的文件名部分来匹配：

1. 模板中传递文件名：

<button @click.prevent="deleteMediaAttachment(mediaAttachment)">Delete me!</button>

2. 修改方法逻辑：

deleteMediaAttachment: function(fileName) {
  // 在原始路径数组中找到对应文件名的元素索引
  const targetIndex = this.attachmentsArray.attachments.findIndex(path => {
    return path.split('/').pop() === fileName;
  });
  // 找到后再删除
  if (targetIndex !== -1) {
    this.attachmentsArray.attachments.splice(targetIndex, 1);
  }
}

注意：这种方法如果有重名文件，会删除第一个匹配到的，存在风险，所以优先推荐方案一。

额外优化建议 #

• 循环时尽量避免用index作为key（如果你的附件有唯一标识的话），可以提升Vue的渲染性能
• 计算属性里的判断可以用可选链简化，避免空值报错：

attachmentsFileNames() {
  const attachments = this.attachmentsArray?.attachments;
  if (!attachments) return null;
  return attachments.map(item => item.split("/").pop());
}

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