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 class="network_Group">
<tr
v-for="(networkGroup) in networkGroups[team.id].data"
:key="networkGroup.id"
:class="{ odd2: index % 2 !== 0 }">
<td
class="text-center data-column first_row">
<span> {{ networkGroup.source }} </span>
</td>
<td class="text-center data-column">
<span> {{ networkGroup.name }} </span>
</td>
<td class="text-nowrap text-left breakAll">
<span> {{ networkGroup.accountId }}</span>
</td>
<td class="text-center data-column">
<span> {{ networkGroup.size }} </span>
</td>
</tr>
</tbody>This is my table: Current table This is what I want: Table I want
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 class="network_Group">
<tr v-for="(gr, idx) in groups" :key="idx">
<td class="text-center data-column first_row">
<span> {{ gr }} </span>
</td>
<td>
<table>
<tbody class="network_Group">
<tr
v-for="(networkGroup) in net(gr)"
:key="networkGroup.id"
:class="{ odd2: index % 2 !== 0 }">
<td class="text-center data-column">
<span> {{ networkGroup.name }} </span>
</td>
<td class="text-nowrap text-left breakAll">
<span> {{ networkGroup.accountId }}</span>
</td>
<td class="text-center data-column">
<span> {{ networkGroup.size }} </span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>