[Vuejs]-How to show grouped items using v-for in Vue?

by

2👍

✅

Uses one computed property is one solution.

Once gets new data from the API, uses Array.concat or ... operator to merge into current data property.

Then in computed property, uses one Array.reduce to get the expected output.

new Vue({
  el: '#app',
  data () {
    return {
      items: []
    }
  },
  computed: {
    computedItems: function () {
      return this.items.reduce((pre, cur) => {
        if (!(cur.letter in pre)) pre[cur.letter] = []
        pre[cur.letter].push(cur)
        return pre
      }, {})
    }
  },
  methods: {
    getItemsFromAPI: function () {
      setTimeout(() => {
        this.items = [...this.items, ...[
            { letter: "A", name: "Albert" },
            { letter: "A", name: "Archer" },
            { letter: "B", name: "Blade" },
            { letter: "B", name: "Birdie" },
        ]]
      }, 1000)
    },
    getItemsFromAPI1: function () {
      setTimeout(() => {
        this.items = [...this.items, ...[
            { letter: "C", name: "Albert" },
            { letter: "C", name: "Archer" },
            { letter: "D", name: "Blade" },
            { letter: "D", name: "Birdie" },
        ]]
      }, 1000)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="getItemsFromAPI()">Load Data</button>
    <button @click="getItemsFromAPI1()">Load Data (new letter)</button>
    <section v-for="(group, key) in computedItems" :key="key">
        <div>{{key}}</div>
        <div v-for="(item, index) in group" :key="index">
        {{index}}: {{item.name}}
        </div>
    </section>
</div>
👤Sphinx

1👍

I am not sure that I understand you exactly but I think you want this.

<div v-for="item in list">
      <div v-for="person in Object.keys(item)">{{item[person]}}</div>
</div>
👤Kevin Li

Leave a comment