Question

如何从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

谢谢

Answer 1

我认为有很多方法可以实现“从For循环中删除重复项”

仅举一个例子：

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

Answer 2

我认为您正在尝试在标记中做太多事情。在标记中将所有数据处理保持尽可能小。

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

标记

 <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;
  }
}

从For循环中删除重复项

2 个答案:

标记

脚本