vue.js - 如何将异步数据填充到 v-data-table

Question

所以我在将异步数据填充到 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- 时遇到问题卡表。我需要做什么才能显示数据？

Answer 1

一些 vuetify 组件对其 props 的期望更加宽容，但 v-data-table 不是这样的:它希望填充其 items 属性从一开始就有一个正确的数组。但就你而言，它开始时未定义。

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