如何将异步数据填充到 v-data-table答案

【问题标题】：How to populate async data to v-data-table如何将异步数据填充到 v-data-table
【发布时间】：2020-11-14 23:15:37
【问题描述】：

所以我无法将异步数据填充到 vuetify v-data-table。我认为下面的代码应该可以完成工作，

<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)
}

但我得到了错误

[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>

如果我要将:items="disksData" 更改为:items="items"，其中items 是硬编码的，则会出现数据。我在其他地方使用了相同的异步函数在v-for 中填充数据并且获取数据没有问题，我不确定为什么我在使用v-card-table 时遇到问题。我需要做什么才能显示数据？

【问题讨论】：

也许v-data-table 期望它的数据总是一个合适的数组？如果先用空数组填充呢？
@raina770w，谢谢你，你是个天才。谢谢。
很高兴为您提供帮助。 :) 我应该把它变成你接受的答案吗？
是的，我肯定能做到

标签： vue.js async-await vuetify.js

【解决方案1】：

一些 vuetify 组件对它们的 props 期望更宽容，但 v-data-table 不是这样：它希望它的 items 属性从一开始就用适当的数组填充。但在你的情况下，它开始未定义。

解决此问题的一种可能方法是提供一个空数组（作为默认值），然后将其值替换为响应。

【讨论】：