Vuejs - 如何使用 v-for 获取数组中的所有唯一值(删除重复项) [英] Vuejs - How to get all unique values in a array (remove duplicates) using v-for

问题描述

如何在每个 distinct date 只显示一个按钮?

我可以使用两个 v-for 循环吗?如何在循环中选择不同的值?

数据模型:

allQuestions : []问题:{'id':'123'，'日期':'25'}

解决方案

您可以使用 设置:

<块引用>

Set 对象允许您存储任何类型的唯一值，无论是原始值还是对象引用.

MDN 的例子:

const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]console.log([...new Set(numbers)])

只需根据您的需要进行修改即可.

How to show only one button per every distinct date ?

can i use two v-for loops ? how to select distinct values in my loop?

<div v-for="question in allQuestions" >
  <button v-for="date in question.date">
    {{date}}
  </button>
</div>

Data model :

allQuestions : []
question : {'id' : '123' , 'date' : '25'}

解决方案

You can use Set:

The Set object lets you store unique values of any type, whether primitive values or object references.

MDN's example:

const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]

console.log([...new Set(numbers)])

Just modify it to your needs.

这篇关于Vuejs - 如何使用 v-for 获取数组中的所有唯一值(删除重复项)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！