V-for in alphabetical order

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

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