I'm having trouble retrieving data from Firestore and applying it as my array. I expect to see objects in the console but nothing is showing up. Should the method be called somewhere in the code? My method created() is functioning, but only when I handle the event by using @click - then my array is updated (added from the database) and also shows in the console. I have read the documentation from Firebase and the result is the same. I just started learning Vue.js a couple of days ago. Below is my code:
<template>
<div class="index container">
<div class="card" v-for="smoothie in smoothies" :key="smoothie.id">
<div class="card-content">
<i class="material-icons delete" @click="deleteSmoothie(smoothie.id)">delete</i>
<h2 class="indigo-text">{{smoothie.title}}</h2>
<ul class="ingredients">
<li v-for="(ing, index) in smoothie.ingredients" :key="index">
<span class="chip">{{ing}}</span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import db from '@/firebase/init.js'
export default {
name: 'Index',
data() {
return {
smoothies: [
// {title: 'Banana shake', slug: 'banana-shake', ingredients: ['banans', 'granats'], id: 1},
// {title: 'Morning brew', slug: 'morning-brew', ingredients: ['banans', 'orange'], id: 2},
]
}
},
methods: {
deleteSmoothie(id) {
this.smoothies = this.smoothies.filter(smoothie => {
return smoothie.id != id
})
},
created() {
db.collection('smoothies').get()
.then(snapshot => {
snapshot.forEach(doc => {
console.log(doc.data())
let smoothie = doc.data()
smoothie.id = doc.id
this.smoothies.push(smoothie)
})
})
}
}
}
</script>
firebase
import * as firebase from "firebase/app";
import "firebase/analytics";
import "firebase/auth";
import "firebase/firestore";
const firebaseConfig = {
...
};
const firebaseApp = firebase.initializeApp(firebaseConfig)
export default firebaseApp.firestore()