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 — Phil
– Phil, Commented Jan 19, 2017 at 6:20
Sorry, I'm a newbie in VueJS. I heard there is no filter option in vuejs2 — Gijo Varghese
– Gijo Varghese, Commented Jan 19, 2017 at 6:22

Phil · Accepted Answer · 2019-08-29 23:38:37Z

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, 2019 at 23:38

answered Jan 19, 2017 at 6:30

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gijo Varghese Over a year ago

ok. Great a thanks. But what is that '...' before? Is that a javascript syntax or vuejs?

Phil Over a year ago

@Gijo that's the JavaScript spread operator. You can also use Array.from (see the linked post)

jmartsch Over a year ago

@phil How can I get and output the other properties of a product? I made a Codepen to demonstrate the issue codepen.io/jmar/pen/eEYGXW

Phil Over a year ago

@jmartsch I suggest you open a new question

tony19 · Accepted Answer · 2022-07-15 23:58:20Z

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, 2022 at 23:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 19, 2017 at 6:30

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

3 Comments

Gijo Varghese Over a year ago

but how does this take 'unique' products? on what basis?

Saurabh Over a year ago

@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.

Gijo Varghese Over a year ago

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

Collectives™ on Stack Overflow

Remove repeated elements from v-for in VueJS

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related