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を含める場合は、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> 

---

を使用し、同じことが実現することができますSet

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

注意して ：Vue.jsがSet（または他のIterator）を繰り返すことができないため、私はconverted the Set to an arrayです。

Answer 2

あなたが計算されたプロパティを作成することができます：あなたのproductsのためのユニークな配列を返しますuniqProductsを、あなたは次の変更を行う必要があります。

HTML

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

in vueインスタンスの場合は、computed propertyと書く必要があります。これはユニークな配列を得るために何らかの手法（多くはhereに記載されています）を使用できます。

_ここで、lodashまたはunderscoreとすることができます。

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