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

Question

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

Answer 1

一些vuetify组件对其道具的期望更宽容，但v-data-table并非如此：它希望其items属性从一开始就用适当的数组填充。但在你的情况下，它开始是未定义的。

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