i'm calling an API and storing the data into an array ( users[] ), and i can see in the
console that users[] is being populated, but the data-table
is not
showing any rows.
<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>
i'm new to vue and sorry for bad formatting of the code. this is the output which i'm getting. image
Please modify getdata method as below and it should work
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;
});