我正在使用以下代码显示数组中的类别。该数组可能包含重复的类别。有什么办法我只能在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' }
]
答案 0 :(得分:9)
只需使用您想要的唯一值创建计算值。如果您在项目中包含Lodash,只需使用
即可import uniq from 'lodash/uniq'
// ...snip
computed: {
productCategories () {
return uniq(this.products.map(p => p.category))
}
}
并在您的模板中
<li v-for="category in productCategories">
{{category}}
</li>
如果您不热衷于引入Lodash(或下划线),可以使用converted the Set
to an array
productCategories () {
return [...new Set(this.products.map(p => p.category))]
}
注意:我已经http://yaml.org/,因为Vue.js似乎无法迭代Set
(或任何其他Iterator
)。
答案 1 :(得分:1)
您可以创建一个计算属性:uniqProducts
,它将为您的products
返回唯一数组,您需要进行以下更改:
<强> HTML 强>
<li v-for="product in uniqProducts">
{{product.category}}
</li>
在 vue 实例中,您必须编写一个here,它可以使用任何技术(许多列出的lodash)来获取uniq数组。
_
此处可以是underscore或Set
。
computed: {
uniqProducts () {
return _.uniqBy(this.products, 'property')
}
}