vuetify 数据表不显示数据

Question

我正在调用一个 API 并将数据存储到数组中 ( users[] (，我可以在 正在填充用户 [] 但data-table未填充的控制台 显示任何行。

<template>
<v-data-table
:headers="headers"
:items="users"
class="elevation-1"
:dark="true"
>
<template v-slot:item.deaths="{ item }">
<v-chip :color="getColor(item.deaths)" dark>{{ item.deaths }}</v-chip>
</template>
<script>
export default {
data () {
return {
indiaTotalCase: null,
indianDeaths: null,
indianDischarged: null,
headers: [
{ text: 'State', align: 'start', sortable: false, value: 'loc'},
{ text: 'Cases', value: 'totalConfirmed' },
{ text: 'Deaths', value: 'deaths' },
{ text: 'Discharged', value: 'discharged' } 
],
users: [],
}
},
mounted(){
this.getdata();
console.log("call finished");
},
methods: {
getColor (deaths) {
if (deaths > 100) return 'red'
else if (deaths > 50) return 'orange'
else return 'green'
},
getdata() {
this.$http.get('https://api.rootnet.in/covid19-in/stats/latest')
.then(response =>{
return response.json();
})
.then(res =>{
const data = res.data;
this.indiaTotalCase = data.summary.total;
this.indianDeaths = data.summary.deaths;
this.indianDischarged = data.summary.discharged;
const regionalData = data.regional;
for(let index in regionalData){
this.users[index] = regionalData[index];
}
});
}
},
</script>

我是 Vue 的新手，很抱歉代码格式不正确。 这是我得到的输出。图像

Answer 1

请按如下方式修改 getdata 方法，它应该可以工作

getdata() {
this.$http.get('https://api.rootnet.in/covid19-in/stats/latest')
//  .then(response =>{
//    return response.json();
//  })
.then(res =>{
console.log('api res ',res)
const data = res.body.data;
this.indiaTotalCase = data.summary.total;
this.indianDeaths = data.summary.deaths;
this.indianDischarged = data.summary.discharged;
const regionalData = data.regional;
//  for(let index in regionalData){
//    this.users[index] = regionalData[index];
// }
this.users = regionalData;
});