I have a Vuetify data table which takes the headers as an array of objects returned in the component and the data (:items) is bound to an array also returned in the component. This array is populated with Firestore data which is there, because I can console.log it.
The issue is that the data table is empty, and contains no data in the body at all.
Could this be caused because my items array contains more data points then I have headers in my table?
Vuetify Component
<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>
Component Script
<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>
question from:
https://stackoverflow.com/questions/65829557/array-of-objects-data-wont-bind-to-vuetify-data-table 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…