Сортировка в VueJS 2

Question

Я пытаюсь сортировать список элементов в VueJS 2 с помощью slice(). Sort(), но это не имеет никакого эффекта. В 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 (в то время как это не соответствует алфавиту). Как работает сортировка, поскольку я не могу найти на ней правильную документацию.

Answer 1

Ваша проблема не имеет ничего общего с Vue. Сортировка массивов в JavaScript просто работает по-другому, чем вы ожидали. Вы не можете передать ключ sort(); вместо этого вы должны реализовать свою собственную функцию сравнения:

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

Кроме сортировочных работ в месте, так что не должно быть необходимо скопировать и передать массив.