I'm new to Vue.js and I'm trying to merge rows with same value but my table isn't showing up correctly. I'm stuck, could anyone advise me?

async getNetworks(audId) {
    try
    {
        const response = await this.axios.get("/s/teams/network-groupss?audId="   audId);
            
        if (!this.networkGroups[audId])
        {
            this.$set(this.networkGroups, audId, {});
            this.$set(this.networkGroups[audId], 'isExpanded', false);
        }
            
        this.$set(this.networkGroups[audId], 'data', response.data ? response.data.data : []);
    }
        catch (error)
        {         
                console.log(error.message);
            }
        
    
}

<tbody >
    <tr
    v-for="(networkGroup) in networkGroups[team.id].data"
    :key="networkGroup.id"
    :>
        <td
            >
            <span> {{ networkGroup.source }} </span>
        </td>
        <td >
            <span> {{ networkGroup.name }} </span>
        </td>
        <td >
            <span> {{ networkGroup.accountId }}</span>
        </td>
        <td >
            <span> {{ networkGroup.size }} </span>
        </td>
    </tr>
</tbody>

This is my table: Current table This is what I want: Table I want

CodePudding user response：

Try like following snippet : (you can use computed property to group items, and for each group loop for items)

const app = Vue.createApp({
  data() {
    return {
      networkGroups: [{id: 1, source: "group A", name: "Aples", accountId: "1237", size: 9}, {id: 2, source: "group B", name: "Oranges", accountId: "0293", size: 7}, {id: 3, source: "group A", name: "Carrots", accountId: "3849", size: 1}, {id: 4, source: "group B", name: "Onions", accountId: "8172", size: 3}, {id: 5, source: "group B", name: "Mangos", accountId: "2742", size: 10}],
    };
  },
  computed: {
    groups() {
      const gr = []
      this.networkGroups.forEach(g => {
        if (!gr.includes(g.source)) gr.push(g.source)
      })
      return gr
    },
  },
  methods: {
    net(group) {
      return this.networkGroups.filter(n => n.source === group)
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<table>
  <tbody >
    <tr v-for="(gr, idx) in groups" :key="idx">
      <td >
        <span> {{ gr }} </span>
      </td>
      <td>
        <table>
          <tbody >
            <tr
              v-for="(networkGroup) in net(gr)"
              :key="networkGroup.id"
              :>
              <td >
                  <span> {{ networkGroup.name }} </span>
              </td>
              <td >
                  <span> {{ networkGroup.accountId }}</span>
              </td>
              <td >
                  <span> {{ networkGroup.size }} </span>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</div>