How to merge rows with the same value

Question

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


    
        
             {{ networkGroup.source }} 
        
        
             {{ networkGroup.name }} 
        
        
             {{ networkGroup.accountId }}
        
        
             {{ networkGroup.size }}

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

user_11989189 · Answer

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




  
    
      
         {{ gr }} 
      
      
        
          
            
              
                   {{ networkGroup.name }} 
              
              
                   {{ networkGroup.accountId }}
              
              
                   {{ networkGroup.size }}

How to merge rows with the same value

1 Answers