Listing grouped data in table rows - vue.js

Question

I assume I have the following data
data() {
return {
users: [
{country: 'USA', name: 'Taylor'},
{country: 'UK', name: 'Tony'},
{country: 'USA', name: 'Mary'},
{country: 'JAPAN', name: 'Jane'},
{country: 'JAPAN', name: 'Moses'},
// More users from different countries in the world
]
}
}
I want to group by country and my final table structure to be like this, ordered by country name desc.
<table>
<tr>
<th>Country</th>
<th>User</th>
</tr>
<tr>
<td colspan="2">USA</td>
</tr>
<tr>
<td></td>
<td>Taylor</td>
</tr>
<tr>
<td></td>
<td>Mary</td>
</tr>
<tr>
<td colspan="2">UK</td>
</tr>
<tr>
<td></td>
<td>Tony</td>
</tr>
<tr>
<td colspan="2">JAPAN</td>
</tr>
<tr>
<td></td>
<td>Jane</td>
</tr>
<tr>
<td></td>
<td>Moses</td>
</tr>
</table>
How can I achieve this? I have tried playing with Lodash's groupBy but cant achieve it
let users = _.groupBy(this.users, function(user) { return user.country })

Answer 1

Here is one example of how to do it without any libraries.
console.clear()
new Vue({
el: "#app",
data:{
users: [
{country: 'USA', name: 'Taylor'},
{country: 'UK', name: 'Tony'},
{country: 'USA', name: 'Mary'},
{country: 'JAPAN', name: 'Jane'},
{country: 'JAPAN', name: 'Moses'},
// More users from different countries in the world
]
},
computed:{
byCountry(){
return this.users.reduce((acc, user) => {
(acc[user.country] = acc[user.country] || []).push(user.name)
return acc
}, {})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Country</th>
<th>User</th>
</tr>
<template v-for="people, country in byCountry">
<tr>
<td colspan="2">{{country}}</td>
</tr>
<tr v-for="person in people">
<td></td>
<td>{{person}}</td>
</tr>
</template>
</table>
</div>