从 VueJS 中的 v-for 中删除重复的元素

Question

我正在使用以下代码来显示数组中的类别。该数组可能包含重复的类别。有什么办法我只能在 VueJS 中选择独特的元素？

<li v-for="product in products">
{{product.category}}
</li>

数组：

products: [
      { id: '1', title: 'Test 1', category: 'Test 3' },
      { id: '2', title: 'Test 2', category: 'Test 1' },
      { id: '3', title: 'Test 3', category: 'Test 2' },
      { id: '3', title: 'Test 4', category: 'Test 1' },
      { id: '5', title: 'Test 5', category: 'Test 3' }
    ]

Answer 1

您可以创建一个计算属性：uniqProducts，它将为您的products 返回唯一数组，您需要进行以下更改：

HTML

<li v-for="product in uniqProducts">
  {{product.category}}
</li>

在 vue 实例中，您必须编写一个 computed property，它可以使用任何技术（许多列出的 here）来获取 uniq 数组。

_ 这里可以是lodash 或underscore。

computed: {
   uniqProducts () {
      return _.uniqBy(this.products, 'property')
   }
}

Answer 2

您可以使用所需的唯一值创建计算属性。如果您在项目中包含 Lodash，请尝试 _.uniq

import uniq from 'lodash/uniq'
// ...snip

computed: {
  productCategories () {
    return uniq(this.products.map(({ category }) => category))
  }
}

在你的模板中

<li v-for="category in productCategories">
  {{category}}
</li>

---

如果您不热衷于引入 Lodash（或其他实用程序库），也可以通过 Set 实现相同的目的

productCategories () {
  return [...new Set(this.products.map(({ category }) => category))]
}

注意：我已经 converted the Set to an array，因为 Vue.js 似乎无法迭代 Set（或任何其他 Iterator）。