V-for 按字母顺序排列

Question

我有一些问题 sorting/ordering 我的 v-for table 按字母顺序排列。我试过之类的东西，但我无法让它为我工作？

    <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>

希望你能帮忙 - 让我知道你需要更多我的代码。

//街

Answer 1

如果您想按名称排序，此代码有效：

<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>

您可以按订单字段排序，只需将字段名称更改为 v-for 中的另一个字段

Answer 2

如果你想对对象数组（客户端）进行排序或使用一些第 3 方库，如 loadash 或 underscore，你需要编写自己的排序函数。

使用 underscore 库，您的代码将如下所示：


    <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>

V-for 按字母顺序排列

V-for in alphabetical order

sorting

vue.js

v-for