从 For 循环中删除重复项

Posted 2023-02-22

【中文标题】从 For 循环中删除重复项

【英文标题】：Remove Duplicates From For Loop

【发布时间】：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

【参考方案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