V-for in alphabetical order - sorting

Question

I'm having some issues sorting/ordering my v-for table in alphabetical order. I've tried things like Sort an array in Vue.js but I can't get it to work for me?
<tbody>
<tr v-for="(client, index) in clients" :key="index">
<td>{{ client.name }}</td>
<td>{{ client.contactpersonfirstname }} {{ client.contactpersonlastname }}</td>
<td>{{ client.email }}</td>
<td>{{ client.phone }}</td>
<td>
<div :class="{ active: index == currentIndex }" #click="setActiveClient(client, index)">
<a class="badge badge-success" :href="'/clients/' + client.id" >Open</a>
</div>
</td>
</tr>
</tbody>
<script>
import ClientDataService from "../services/ClientDataService";
export default {
name: "clients-list",
data() {
return {
clients: [],
currentClient: null,
currentIndex: -1,
name: "",
};
},
methods: {
retrieveClients() {
ClientDataService.getAll()
.then(response => {
this.clients = response.data;
// eslint-disable-next-line no-console
console.log(response.data);
})
.catch(e => {
// eslint-disable-next-line no-console
console.log(e);
});
},
setActiveClient(client, index) {
this.currentClient = client;
this.currentIndex = index;
},
},
mounted() {
this.retrieveClients();
}
};
</script>
Hope you can help - let me know of you need more of my code.
//Rue

Answer 1

You need to write your own sorting function if you want to sort array of objects (clients) or use some 3rd party library like loadash or underscore.
With usage of underscore library, your code would then look something like this:
<template>
<tbody>
<tr v-for="(client, index) in sorted" :key="index">
<td>{{ client.name }}</td>
<td>
{{ client.contactpersonfirstname }} {{ client.contactpersonlastname }}
</td>
<td>{{ client.email }}</td>
<td>{{ client.phone }}</td>
<td>
<div
:class="{ active: index == currentIndex }"
#click="setActiveClient(client, index)"
>
<a class="badge badge-success" :href="'/clients/' + client.id"
>Open</a
>
</div>
</td>
</tr>
</tbody>
</template>
<script>
import _ from "underscore";
import ClientDataService from "../services/ClientDataService";
export default {
name: "clients-list",
data() {
return {
clients: [],
currentClient: null,
currentIndex: -1,
name: "",
};
},
computed: {
sorted(){
return this.clients ? _.sortBy(this.clients, "name") : [];
}
}
methods: {
retrieveClients() {
ClientDataService.getAll()
.then(response => {
this.clients = response.data;
// eslint-disable-next-line no-console
console.log(response.data);
})
.catch(e => {
// eslint-disable-next-line no-console
console.log(e);
});
},
setActiveClient(client, index) {
this.currentClient = client;
this.currentIndex = index;
},
},
mounted() {
this.retrieveClients();
}
};
</script>

Answer 2

This code is work if you want to sort by name:
<tr v-for="(client, index) in clients.sort((a, b) => (a.name > b.name) ? 1 : -1)" :key="index">
<td>{{ client.name }}</td>
<td>{{ client.contactpersonfirstname }} {{ client.contactpersonlastname }}</td>
<td>{{ client.email }}</td>
<td>{{ client.phone }}</td>
<td>
<div :class="{ active: index == currentIndex }" #click="setActiveClient(client, index)">
<a class="badge badge-success" :href="'/clients/' + client.id" >Open</a>
</div>
</td>
</tr>
You can sort by order fields, just change field name with another field in v-for