Question

我尝试使用slice（）。sort（）对VueJS 2中的项目列表进行排序，但它没有任何效果。在vuejs 1中有一个很好的orderBy过滤器，但他们删除了这个。我目前的设置如下：

<table>
        <thead>
          <tr>
            <th v-for="column in columns" v-on:click="sortBy(column)">{{ column }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="customer in customerslist">
            <td>{{ customer.firstname }}</td>
            <td>{{ customer.surname }}</td>
            <td>{{ customer.added }}</td>
            <td></td>
          </tr>
        </tbody>
      </table>

...

      sortBy(sortKey) {
        this.customerslist = this.customerslist.slice().sort(sortKey);
        console.log(sortKey);
        console.log(this.customerslist[0].firstname);
      }

它是与客户的二维数组。每个客户都有名字，姓氏和附加字段。

但是如果我单击firstname列标题，这总是在控制台中返回相同的firstname（虽然这不是按字母顺序排列的）。排序如何工作，因为我无法在其上找到正确的文档。

Answer 1

你的问题与Vue没有任何关系。 JavaScript中的数组排序工作方式与预期不同。您无法将密钥传递给sort();相反，你必须实现自己的比较功能：

this.customerslist.sort((a, b) => a[sortKey].localeCompare(b[sortKey]));

此外，排序也可以就地进行，因此不需要复制和重新分配数组。

在VueJS 2中排序

1 个答案: