代码之家 › 专栏 › 技术社区 › Mohammad Mahdi KouchakYazdi

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

v-for vuejs2 vue.js

1

Mohammad Mahdi KouchakYazdi · 技术社区 · 7 年前

如何每个按钮只显示一个按钮 不同的 date ?

我能用两个V形环吗?如何选择 不同的 循环中的值?

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

数据模型:

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

3 回复 | 直到 7 年前

1

2

Vucko 7 年前

你可以使用 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)])

只需根据需要进行修改。

2

1

Yom T. 7 年前

使用 reduce 执行一个 减速器 对数组的每个项执行函数,然后将单个匹配项合并到现有对象中 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>

3

0

Adrien Rosi 7 年前

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