return unique values from array in vuejs

Question

I am using Vuejs and Vuex to return an array of item objects. The items can be submitted to the database with the same name multiple times. I need to create a list of unique item names in an array in Vuejs.

from map getters below all Items returns an array of objects that looks like

[
  {"name": "item one", "number": "001", "size": "4000kb"}
  {"name": "item two", "number": "002", "size": "5000kb"}
  {"name": "item three", "number": "003", "size": "6000kb"}
]


   methods: {
    ...mapActions(["fetchItems"])
  },
  computed: {
    ...mapGetters(["allItems"]),
 itemNames: function() {
      return [...new Set(this.allItems.name)]
    } 
  },
  created() {
    this.fetchItems(),
    this.itemNames()
  },

In computed properties itemNames if I take off the .name [..new Set(this.allItems)] the array returns the complete objects - how can I just pull the name out to a list?

The v-for does not return the array

<v-list-item v-for="(itemName, index ) in itemNames" :key="index">
  <v-list-item-content> {{ itemName }}</v-list-item-content>
</v-list-item>

Thanks for any help.

please paste here the value of console.log(this.allItems)

tuhin47
– tuhin47

2020-04-20 17:25:55 +00:00
Commented Apr 20, 2020 at 17:25 — tuhin47
– tuhin47, Commented Apr 20, 2020 at 17:25

Gosmith · Accepted Answer · 2020-04-21 14:55:14Z

2

I solved this one in computed properties by mapping the items to a new array like so

 itemNames: function() {
      return  [...new Set(this.allItems.map(x => x.item.Name))]
    }

answered Apr 21, 2020 at 14:55

Gosmith

4971 gold badge3 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

return unique values from array in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related