无法删除VueJS中集合中的重复项目

Question

我正在尝试从我在Laravel中通过API请求的集合中删除重复项目。

这是我的代码：

computed: {
      // slice the array of data to display

      filteredList() {

        /* NEW PART */


            var tips = this.dublicate;

            /* END NEW PART */



          tips = this.items.filter(item => {
            return item.tip.toLowerCase().includes(this.search.toLowerCase())
          })
          return tips.slice(0, this.display);

      },

      dublicate() {

        var filtered_array = [];
        for(var i =0; i < this.items.length; i++) {
            if(this.items[i].tip.toLowerCase() != this.items[i+1].tip.toLowerCase()) {
              filtered_array.push(this.items[i])
            }
        }
        return filtered_array;
      }
   }
   }

如果我删除NEW PART评论中的代码，那么每个人都可以正常工作。 在NEW PART我试图删除重复内容，基于项tip attribute。 如果tip属性与下一个项目tip属性相同，则应将其从tips数组中排除，该数组将作为v-for =＆＃34;在过滤列表中提示＆＃34;。

但是，我只是使用这个新部件得到一个空数组。我做错了什么？

我从Vue Devtools那里得到以下信息：

dublicate:"(error during evaluation)"
filteredList:"(error during evaluation)"

来自API请求的项目的示例数据：

（这是我得到的数据，当我不尝试删除重复项时，这有效）

由于这是在VueJS中，我无法使用here提供的答案。

Answer 1

您正在使用i + 1查看数组的末尾。您需要推送最后一个项目，而不是在它之后查找它（因为没有一个）。我认为使用filter比使用for循环构建数组更直接。

dublicate() {
  return this.items.filter((a, i) =>
    i === this.items.length - 1 ||
    a.tip.toLowerCase() !== this.items[i + 1].tip.toLowerCase()
  );
}