Vuetify2.0でカスタムソートを使用する

##datatableの並び替えについて
デフォルトのソートは便利ですが、「100円、200円」のような文字列の場合、思うような並び替えができません。

昇順の並び替えですので、「みかん」⇒「りんご」の順番で並び替えてほしいところ。

##カスタムソートを実装する

<v-data-table
  :custom-sort="custom"           
>

カスタムソートを実装するにはcustom-sortを定義し、ソート条件を作成します。
以下の例では、値段の並び替えの場合、文字列から数値を取り出し比較しています。

  methods: {
    custom: function(items, index, isDesc) {
      items.sort((a, b) => {
        if (index[0] === 'price') {
          var priceA = a[index].replace(/[^0-9]/g, '');
          var priceB = b[index].replace(/[^0-9]/g, '');
          if (!isDesc[0]) {
            return priceA - priceB;
          } else {
            return priceB - priceA;
          }
        } else {
          if (!isDesc[0]) {
            return a[index] < b[index] ? -1 : 1;
          } else {
            return b[index] < a[index] ? -1 : 1;
          }
        }
      });
      return items;
    }

使用したテストデータです。

  data () {
    return {
      headers: [
        { text: '名前', value: 'name',},
        { text: '値段', value: 'price' },
      ],
      items: [
        { name: 'りんご', price: '50円',},
        { name: 'みかん', price: '10円',},

カスタムソート実装後、理想の並び順で表示されるようになりました。