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

I'm using the following code to display categories from an array. The array may contain duplicate categories. Is there any way I can only select unique elements in 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' }
    ]

推荐答案

您可以创建具有所需唯一值的计算属性.如果您在项目中包含 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>

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