在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

可以使用所需的唯一值创建计算属性。如果在项目中包含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（或其他实用程序库），可以通过集实现同样的目的

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

注意：我已经将集转换为数组，因为Vue.js似乎无法迭代集（或任何其他迭代器)。