VueJS中无法移除Laravel API返回集合重复项问题排查

我来帮你排查并解决这个问题～首先咱们先分析你当前代码里的两个核心问题：

1. 直接导致报错的原因 #

你的dublicate计算属性循环时，当i走到数组最后一项（也就是i = this.items.length - 1），this.items[i+1]会变成undefined，这时候访问undefined.tip就会直接抛出错误，这就是Vue Devtools显示“error during evaluation”的根源，所以保留NEW PART时整个逻辑直接崩了，返回空数组。

2. 去重逻辑的局限性 #

就算没有报错，你的对比相邻项的逻辑也只能处理连续重复的项，如果重复的tip不是挨着的，根本无法被过滤掉，完全达不到“基于tip属性去重”的需求。

正确的去重实现方案 #

下面给你两种可靠的实现方式，都能彻底解决问题：

方案一：利用ES6 Set（简洁高效） #

computed: {
  filteredList() {
    // 先获取去重后的数组，再做搜索过滤，最后截取显示数量
    const uniqueItems = this.uniqueItems;
    const filtered = uniqueItems.filter(item => 
      item.tip.toLowerCase().includes(this.search.toLowerCase())
    );
    return filtered.slice(0, this.display);
  },
  uniqueItems() {
    const seenTips = new Set();
    return this.items.filter(item => {
      const lowerTip = item.tip.toLowerCase();
      // 只保留第一次出现的tip项
      if (!seenTips.has(lowerTip)) {
        seenTips.add(lowerTip);
        return true;
      }
      return false;
    });
  }
}

方案二：用普通对象记录（兼容性更好） #

如果你的项目需要兼容一些不支持ES6 Set的旧环境，可以用这个方法：

computed: {
  filteredList() {
    const uniqueItems = this.uniqueItems;
    const filtered = uniqueItems.filter(item => 
      item.tip.toLowerCase().includes(this.search.toLowerCase())
    );
    return filtered.slice(0, this.display);
  },
  uniqueItems() {
    const seenTips = {};
    return this.items.filter(item => {
      const lowerTip = item.tip.toLowerCase();
      if (!seenTips[lowerTip]) {
        seenTips[lowerTip] = true;
        return true;
      }
      return false;
    });
  }
}

补充说明 #

• 这两种方法都会遍历数组一次，用容器（Set/对象）记录已经处理过的tip（统一转小写），确保每个tip只保留第一次出现的项，不管重复项是否连续都能正确去重。
• 顺便提一句：你把duplicate（正确拼写）写成了dublicate，虽然不影响代码运行，但建议修正拼写，避免后续维护时的困惑。

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