从 For 循环中删除重复项答案

【问题标题】：Remove Duplicates From For Loop从 For 循环中删除重复项
【发布时间】：2019-03-14 00:59:22
【问题描述】：

如何从我的 for 循环中删除重复项？

我假设通过一个计算函数，或者有什么我可以简单地添加到下面的循环中，只输出我数据中的重复项。

 <div v-for="(item, index) in info" :key="index" class="form-check">
    <div v-for="(cat, index) in item.category_data" :key="index">
        <input type="checkbox" class="form-check-input" v-model="cat_data" :id="index" :value="index">
        <label class="form-check-label">{{ cat }}</label>
    </div>
</div>

重复的代码笔：https://codepen.io/anon/pen/XxNORW?editors=1010

谢谢

【问题讨论】：

如果您不想通过计算属性修改基础数据，您可以使用过滤器。 vuejs.org/v2/guide/filters.html

标签： arrays for-loop vue.js vuejs2

【解决方案1】：

我认为您试图在标记中做太多事情。使标记中的任何数据处理尽可能小。

因此，我建议您使用过滤器返回删除重复项的数组。

标记

 <div v-for="(filteredArray(arr), index) in info" :key="index" class="form-check">
   ...
</div>

脚本

将过滤后的属性添加到您的 vue.js 实例中。

filters: {
  filteredArray: function (array) {
    let data = {}
    this.info.forEach(i=>{
      Object.assign(data,i.category_data)
     })
    return data;
  }
}

【讨论】：

【解决方案2】：

我认为有很多方法可以实现“Remove Duplicates From For Loop”

举个例子：

remove_category_duplicates: function () {
    // Get all categories and remove duplicates
    let data = {}
    this.info.forEach(i=>{
        Object.assign(data,i.category_data)
    })
    return data;
 }

codepen

【讨论】：