问题描述
我有一个 Vuetify 数据表,它将标题作为组件中返回的对象数组,数据 (:items) 绑定到组件中也返回的数组。这个数组填充了那里的 Firestore 数据,因为我可以对它进行 console.log。
问题是数据表是空的,正文中根本没有数据。
这可能是因为我的 items 数组包含的数据点多于表中的标题吗?
Vuetify 组件
<template>
<v-card>
<v-card-title>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="items"
:search="search"
></v-data-table>
</v-card>
</template>
组件脚本
<script>
/* eslint-disable */
import firestore from '/firebase.js';
export default {
data() {
return {
search: '',items: [],headers: [
{
text: 'ID',align: 'start',sortable: true,value: 'name',},{ text: 'Date Created',value: 'Date Created' },{ text: 'Date Finished',value: 'Date Finished' }
],show: false,};
},name: "Home",methods: {
getData() {
firestore.collection("itemStore")
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
var itemData = doc.data();
this.items.push({
id: itemData.incId,dateCreated: itemData.dateCreated,dateFinished: itemData.dateFinished,email: itemData.email
});
console.log(this.items);
});
});
}
},mounted() {
this.getData();
}
};
</script>
解决方法
标题集合的 value
属性必须与项目的键相对应。所以在你的情况下它应该是这样的:
headers: [
{
text: 'ID',align: 'start',sortable: true,value: 'id',},{
text: 'Date Created',value: 'dateCreated'
},{
text: 'Date Finished',value: 'dateFinished'
}
]