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

I suggest you sort `response.data` after retriving clients and then bind to `this.clients` — HADI, Jun 22 '20 at 12:39

score 2 · Answer 1 · answered Jun 23 '20 at 00:44

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>

score 1 · Accepted Answer · answered Jun 22 '20 at 15:11

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

Great, Thanks! Should I worry about the "[Vue warn]: You may have an infinite update loop in a component render function." I get now? — Rue, Jun 23 '20 at 06:39

V-for in alphabetical order

2 Answers2