Exploring a library of books from a Firestore collection in the create() method.
The book data is stored in an array called checkout which is initialized in the data() method.
export default {
name: "checkout-history",
data() {
return {
checkout: []
]
};
},
created() {
db.collection("checkout")
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
const data = {
id: doc.id, // firebase document id
book_did: doc.data().book_did,
borrowed_date: doc.data().borrowed_date,
copies_did: doc.data().copies_did,
due_date: doc.data().due_date
};
this.checkout.push(data); // add to array
});
});
console.log(this.checkout) // displaying data, as seen in the image below
console.log(this.checkout.length) // returns 0
console.log(Object.keys(this.checkout).length) // returns 0
}
......
Upon running console.log(this.checkout);, the console displays the data and structure.
https://i.sstatic.net/YqVyl.png
Despite this, I am unable to iterate through the array, as this.checkout.length remains 0
I attempted to use Object.keys but faced similar results.
Object.keys(this.checkout).forEach(key => {
const keys = this.checkout[key];
console.log(keys);
});
Feeling puzzled and out of solutions.
I have researched various solutions online, but none seem to work.