I am trying to arrange the numerical data in a Vue.js data-table in descending order right from the start. I want it to look like the screenshot provided below.
Screenshot of My Desired Result
The data that needs to be arranged in descending order is the number of cases for people shown in the middle of the picture. I'm struggling to figure out which part of the code needs modification. Can someone please guide me?
<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>