Vue.jsのdata-tableの数値を初期状態から降順で並べたい。

Question

Vue.jsのdata-tableの数値データを初期状態から降順で並び替えた状態で表示したいと思っています。
下記は私が書いたコードの実行画面なのですが、これは、v-data-tableを使うとデータテーブルのヘッダー部分に↓が出てきて、それを押して並び替えた後の画像です。
初期状態からこのような形にしたいと思っています。

降順にするのは、真ん中の「感染者数」のデータです。
コードのどの部分をいじればいいのか、よくわからず困っております。
ご教示いただけませんでしょうか？

<template>
          <v-data-table
            :headers="headers"
            :items="covidList"
            :items-per-page="5"
            class="elevation-1"
            ></v-data-table>
</template>
<script>
import $axios from 'axios';

export default {
   
    data(){
        return{
            headers:[
                {
                    text:'地域',
                    align:'start',
                    sortable:'false',
                    value:'name_ja',
                },
                {text:'感染者数',value:'cases'},
                {text:'死亡者数',value:'deaths'},
            ],
        }
    },
    async asyncData({ $axios }){
        const response = await $axios.get('https://covid19-japan-web-api.now.sh/api/v1/prefectures')
            return{
                covidList:response.data
            }
    }       
}
</script>

Answer 1

公式リファレンスにバッチリ載っていますのでご参考に。
https://vuetifyjs.com/ja/components/data-tables/#sort-on-multiple-columns

いっぱいサンプルがあるので熟読しておきましょう。

Comments

[takochan1192]

hope_mucci 様
ご回答ありがとうございます。参考にさえていただきまして、data-table内に
下記のようにいれてみましたが、うまく並べ変えることができませんでした。
:sort-by="['npatients']"
:sort-desc="[false, true]"
multi-sort

リファレンスがちょっと理解できず、困っております。大変恐縮なのですが、ご教示いただけませんでしょうか？

[hope_mucci]

もうちょっと粘ってみない？
・サンプルはcodepenで編集できる（右上のEdit in Codepenボタン）のでsort-byやsort-descを書き換えて動作を確認してみる
・sort-byに入っている項目がデータ上のどの項目と対応しているかを観察する

Vue関連は本当に情報が少ないので、このようなドキュメントを読み解けないと厳しいです。粘りましょう。

[takochan1192]

やはりドキュメントを解読できなければいけないのですね。
もう少し、頑張って粘ってみます。
ありがとうございます！

[takochan1192]

なんとか並び替えることができました。
ありがとうございました。

[hope_mucci]

それはよかった！これからも頑張ってくださいね。

[takochan1192]

hope_mucci様
ありがとうございます！これからも頑張ります！！