Vue.js <v-data-table> - 默认排序（或根本不排序）/手动排序答案

【问题标题】：Vue.js <v-data-table> - Default sorting( or no sort at all)/manual sortingVue.js <v-data-table> - 默认排序（或根本不排序）/手动排序
【发布时间】：2020-06-10 13:09:26
【问题描述】：

我想显示排序在 Vue.js 数据表中的数值数据从初始状态降序排列。我想从初始状态制作下图。

My Goal screen shot

按降序排列的是图片中间的病例数数据。我很难不知道要修改代码的哪一部分。请告诉我好吗？

 <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:'area',
                    align:'start',
                    sortable:'false',
                    value:'name_ja',
                },
                {text:'cases',value:'cases'},
                {text:'deaths',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>

【问题讨论】：

你研究过 vuetify 文档吗？没有提到如何对v-data-table进行排序？
您要根据哪一列排序？

标签： javascript vue.js axios

【解决方案1】：

使用此解决方案：

<template>
      <v-data-table
        :headers="headers"
        :items="covidList"
        :items-per-page="5"
        :sort-by.sync="columnName"
        :sort-desc.sync="isDescending"
        class="elevation-1"
        ></v-data-table>
</template>
<script>
import $axios from 'axios';

export default {

    data(){
        return{
            columnName:'cases',
            isDescending:true,
            headers:[
                {
                    text:'area',
                    align:'start',
                    value:'name_ja',
                },
                {text:'cases',value:'cases'},
                {text:'deaths',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>

【讨论】：