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); 
     } 

これは2次元配列の顧客です。各顧客には、名字、姓、および追加フィールドがあります。

しかし、firstname列ヘッダーをクリックすると、これは常にアルファベット順ではないのに、同じfirstnameをコンソールに返します。並べ替えはどのように機能するのですか。私は正しい文書を見つけることができません。

Answer 1

問題はVueとは関係ありません。 JavaScriptでの配列の並べ替えは、期待どおりに動作しません。 sort()に鍵を渡すことはできません。コピーして、アレイを再割り当てする必要はありませんので

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

また仕分け作品に-場所：代わりに、あなた自身の比較関数を実装する必要があります。