【问题标题】:vuetify data-table not showing datavuetify 数据表不显示数据
【发布时间】:2020-09-26 03:32:16
【问题描述】:

我正在调用 API 并将数据存储到数组 ( users[] ) 中,我可以在 正在填充 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 新手,很抱歉代码格式错误。 这是我得到的输出。 image

【问题讨论】:

    标签: vue.js vuetify.js vue-tables-2 v-data-table


    【解决方案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;
        });
    

    【讨论】:

      猜你喜欢
      • 2019-12-02
      • 2021-12-31
      • 1970-01-01
      • 2020-04-06
      • 2020-05-05
      • 1970-01-01
      • 2020-03-26
      • 2021-05-03
      • 2020-05-01
      相关资源
      最近更新 更多