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?

Answer 1

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

  {{category}}

---

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