Remove repeated elements from v-for in VueJS

Question

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>

Array:

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' }
    ]

It's an array, so filter it for duplicate values. Maybe use [`_.uniqBy`](https://lodash.com/docs#uniqBy) — Phil, Jan 19 '17 at 06:20
Sorry, I'm a newbie in VueJS. I heard there is no filter option in vuejs2 — Gijo Varghese, Jan 19 '17 at 06:22

Phil · Accepted Answer · 2019-08-29T23:38:37.903

12

You can create a computed property with the unique values you want. If you include Lodash in your project, try _.uniq

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

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

and in your template

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

If you're not keen on introducing Lodash (or other utility libraries), the same can be achieved with a Set

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

Note: I've converted the Set to an array as Vue.js doesn't seem able to iterate the Set (or any other Iterator).

edited Aug 29 '19 at 23:38

answered Jan 19 '17 at 06:30

Phil

157,677
23
242
245

ok. Great a thanks. But what is that '...' before? Is that a javascript syntax or vuejs? – Gijo Varghese Jan 19 '17 at 06:53
@Gijo that's the JavaScript *spread* operator. You can also use `Array.from` (see the linked post) – Phil Jan 19 '17 at 07:29
1

@phil How can I get and output the other properties of a product? I made a Codepen to demonstrate the issue https://codepen.io/jmar/pen/eEYGXW – jmartsch Jul 24 '17 at 13:25
@jmartsch I suggest you open a new question – Phil Jul 24 '17 at 21:35

score 2 · Answer 2 · edited Jul 15 '22 at 23:58

2

You can create a computed property: uniqProducts which will return unique array for your products, you will need to make following changes:

HTML

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

in vue instance you have to write a computed property which can use any technique (many listed here) to get uniq array.

_ here can be lodash or underscore.

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

edited Jul 15 '22 at 23:58

tony19

125,647
18
229
307

answered Jan 19 '17 at 06:30

Saurabh

71,488
40
181
244

1

but how does this take 'unique' products? on what basis? – Gijo Varghese Jan 19 '17 at 06:35
@GijoVarghese I have started to use `uniqProducts` in the HTML, which will get unique array from computed property, you can pass the property on which you want uniqeness. – Saurabh Jan 19 '17 at 06:39
I can create unique separate from backend easy. I was wondering if its possible in vuejs to select unique from a JSON like complex array. I will update the question with array I've – Gijo Varghese Jan 19 '17 at 06:42

Remove repeated elements from v-for in VueJS

2 Answers2

Linked