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

Question

如何只显示每个 不同的 按钮 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'}

原文由 Mohammad Mahdi KouchakYazdi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 设置：

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

只需根据您的需要修改它。

原文由 Vucko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 Yom T. 发布，翻译遵循 CC BY-SA 4.0 许可协议