Vue 3中使用filter方法删除数组指定项不生效的原因是什么

你的判断条件存在逻辑错误，运算符优先级和JS隐式类型转换规则导致判断逻辑完全不符合预期：

• 首先执行优先级上，!id会先运算：你传入的id是Date.now()生成的正整数时间戳，属于JS里的真值，取反后结果固定为布尔值false
• 后续判断item.id == !id等价于判断item.id == false，按照JS隐式类型转换规则，布尔值和其他类型比较时会转成数字，false转成0，实际变成判断item.id == 0
• 你所有新增项的id都是大于0的时间戳，没有任何项的id等于0，所以filter遍历所有项时返回值全是false，最终会把整个数组清空，根本不会删除你指定的那一项。

补充：Array.filter的规则是回调返回true的项会被保留，返回false的项会被移除，要删除指定id的项，核心逻辑应该是「保留所有id不等于目标id的项」。

把判断条件改成判断当前项id和传入的目标id不相等即可，推荐用严格不等于避免隐式类型转换问题：

deleteInvoiceItem(id) {
  this.invoiceItemList = this.invoiceItemList.filter(
    (item) => item.id !== id
  );
},

这个写法和你原来的模板代码完全适配，模板里@click="deleteInvoiceItem(item.id)"传id的写法不用改就能正常运行。

你写的splice版本能正常运行的前提是click事件传整个item对象，如果你要继续用splice版本，需要把模板里的click传参改成deleteInvoiceItem(item)，否则传id进去的话，indexOf(id)永远找不到对应项（数组里存的是对象，不是id值），会删除索引为-1的位置，实际不会生效还可能引发异常。

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