CODEWITHSUNDEEP
vue.jsasync-awaitvuetify.js
Mark
Mark

Reputation: 852

How to populate async data to v-data-table

So I am having trouble populating async data to the vuetify v-data-table. I thought the code below should get the job done,

<template>
    <v-col
        cols="12"
        md="6"
      >
        <base-material-card
          color="warning"
          class="px-5 py-3"
        >
          <template v-slot:heading>
            <div class="display-2 font-weight-light">
              Disk Stats
            </div>

            <div class="subtitle-1 font-weight-light">
              Failed Disks appear red {{ disksData }}
              {{ items }}
            </div>
          </template>
          <v-card-text>
            <v-data-table
              :headers="headers"
              :items="disksData"
            />
          </v-card-text>
        </base-material-card>
      </v-col>
</template>


data(){
    return {
        disksData = '',
    },
},
created: async function () {
      const response = await fetch('http://localhost:5000/diskinfo')
      const responseObject = await response.json()
      this.disksData = responseObject
      console.log(this.disksData)
}

But I'm getting the error

[Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"

found in

---> <VData>
       <VDataTable>
         <VCard>
           <MaterialCard> at src/components/base/MaterialCard.vue
             <DashboardDashboard> at src/views/dashboard/Dashboard.vue
               <VMain>
                 <DashboardCoreView> at src/views/dashboard/components/core/View.vue
                   <VApp>
                     <DashboardIndex> at src/views/dashboard/Index.vue
                       <App> at src/App.vue
                         <Root>

If I am to change :items="disksData" to :items="items" where items is hard coded then the data appears. I've used the same async function elsewhere to populate data in a v-for and have no problem getting the data, I'm not sure why I'm having trouble with the v-card-table. What do I need to do to get the data to appear?

Upvotes: 2

Views: 2083

Answers (1)

raina77ow
raina77ow

Reputation: 106483

Some vuetify components are more forgiving in what they expect from their props, but v-data-table is not the one: it expects its items property to be filled with a proper array from the beginning. But in your case, it starts undefined.

One possible approach to solve this is to provide an empty array (as a default value), then replace its value with response.

Upvotes: 4

Related Questions