Vuejs - 如何使用 v-for 获取数组中的所有唯一值（删除重复项）

Posted 2023-02-16

【中文标题】Vuejs - 如何使用 v-for 获取数组中的所有唯一值（删除重复项）

【英文标题】：Vuejs - How to get all unique values in a array (remove duplicates) using v-for

【发布时间】：2019-06-02 03:39:45

【问题描述】：

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

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

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

数据模型：

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

【问题讨论】：

是的，您可以像以前那样使用两个循环，但是您的对象应该在数组中的数组中。喜欢：allQuestions : [ question : 'id' : '123' , ['date' : '25','date' : '25','date' : '27'], ]

@Najamussaqib 不同的值

您可以像这样选择或绑定值。 <button v-for="date in question.date"> date.id </button>

@Najamussaqib 不起作用。因为数据没有 id 属性。

这是因为您的 allQuestions 数组中没有任何内容。将您的 question 对象放入您的 allQuestion 数组中。

【参考方案1】：

你可以使用Set:

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)])

只需根据您的需要进行修改。

【讨论】：

这将不起作用，因为 OP 的 allQuestions 数组中的对象不是唯一的

@Frank 好吧，我很不确定 OP 真正想要什么，因为标题是 "Vuejs - 如何使用 v-for 获取数组中的所有唯一值（删除重复项）" 其中Set 工作得很好。

那么你将如何使用 Set 来获取数组中的所有对象，其中每个对象的某个属性的所有值都是唯一的。我真的很感兴趣。

@Frank 你能说得更具体点吗？ “每个对象的某个属性的所有值都是唯一的” - 不是需要找到唯一的，而不是全部吗？也请创建一个用于测试的小提琴。

考虑到他包含的数据类型，这与 OP 提出的问题完全相同。我会做一个小提琴

【参考方案2】：

使用reduce 对数组中的每一项执行reducer 函数，然后将各个匹配项合并到现有的assign 对象中。此合并过程负责删除（或实际替换）重复项。

const vm = new Vue(
  el: '#app',

  data() 
    return 
      allQuestions: [
         id: '123', date: '14' ,
         id: '456', date: '2' ,
         id: '933', date: '2' ,
         id: '789', date: '7' ,
         id: '220', date: '14' 
      ]
  ,

  computed: 
    uniqueQuestions() 
      return this.allQuestions.reduce((seed, current) => 
        return Object.assign(seed, 
          [current.date]: current
        );
      , );
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="question in uniqueQuestions" :key="question.date">
    <button v-for="date in question.date">
    date
  </button>
  </div>
</div>

【讨论】：

虽然我不太确定您希望question.date 的格式是什么样的。在您的示例中，您将其作为字符串，但我不明白您为什么要将 v-for 单个日期作为字符？

【参考方案3】：

您可以使用计算来显示按日期排序的所有问题的数组。

【讨论】：

还有其他解决方案吗？