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: uniqProducts which will return unique array for your products, you will need to make following changes:

HTML

  {{product.category}}

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