I am facing an issue with loading data from firestore asynchronously. Although I can see the data in the log, Vue is only displaying the initial value before the data is loaded.
I have tried calling the loading method both using beforeMount() and from a click of the button.
It seems like I'm missing some fundamental piece here - any help would be greatly appreciated!
<template>
<div class="pt-3">
<v-row class="d-flex justify-center">
<v-col cols=4>
<v-text-field
label="New Land"
outlined v-model="newItem"
@keyup.enter="addItem"/>
</v-col>
<v-col cols=4>
<v-text-field
label="Region"
outlined v-model="newRegion"
@keyup.enter="addItem"/>
</v-col>
</v-row>
<v-row class="d-flex justify-center">
<v-col cols=6>
<v-btn color="primary" @click="addItem">Add Land</v-btn>
</v-col>
</v-row>
<v-row class="d-flex justify-center">
<v-col cols=6>
<v-btn @click="getGeoHierarchy('Geographies',0,0,[])">Fetch Geographies</v-btn>
</v-col>
</v-row>
<v-row>
{{vGeoData}}
<v-col>
<v-card v-for="(geography,id) in vGeoData" :key="id">
<v-card-title>{{geography[0].name | capitalize }} </v-card-title>
<v-card-text> tests</v-card-text>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import { db } from '../firebase/db'
export default {
async created(){
},
beforeMount(){
this.getGeoHierarchy('Geographies',0,0,[]);
},
data() {
return {
Geographies:[],
newItem: "",
newRegion:"",
vFirst:true,
vTopLevel:0,
vGeoData: [''],
vToplevelData: [],
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},
methods:{
async addItem() {
if(this.newItem && this.newRegion) {
var docData = {
name: this.newItem,
regions : {
name: this.newRegion
}
};
await db.collection("Geographies").add(docData);
this.newItem ="";
this.newRegion = "";
}
},
deleteItem(id){
db.collection("Geographies").doc(id).delete();
},
async getGeoHierarchy(vPath,vStep,vCounter,vGeographies){
console.log(vPath)
const vTempGeo = [];
await db.collection(vPath)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
const vCollections = doc.data().collections;
vTempGeo.push({
name: doc.data().name,
id: doc.id,
collection: vCollections,
path: vPath + "/" + doc.id,
level: vStep,
})
return vTempGeo
});
});
//debugger;
console.table("vGeographies:",vGeographies);
for(let i=0; i<vTempGeo.length;i++){
vGeographies.splice(vCounter+i,0,vTempGeo[i]);
// debugger
}
const lGeographies = vGeographies.length;
for (let i=vStep; i<lGeographies;i++){
const vCurrent = vGeographies[i];
//debugger
if(Array.isArray(vCurrent.collection)){
for(let j=0; j < vCurrent.collection.length; j++){
await this.getGeoHierarchy(vCurrent.path+"/"+vCurrent.collection[j],vStep+i+j+1,vCounter+1,vGeographies);
}
}
}
console.log("this.Geographies",this.Geographies);
console.table("vGeographies:",vGeographies);
// debugger
this.Geographies = vGeographies;
this.populateGeoData(0);
return this.Geographies
},
populateGeoData(vTopLevel) {
console.log('--populateGeodata','start')
console.table("this.Geographies:",this.Geographies);
let vTempArr = [];
let vTopLevelData = [];
let vTempGeo = [];
let vFirst = true;
let vTopLevelCounter = 0;
for(const geography of this.Geographies){
console.log("geography:", geography)
const last = (this.Geographies.length-1 == this.Geographies.indexOf(geography))
// debugger
if(!vFirst){
if(geography.level==vTopLevel){
vTempGeo[0] = vTopLevelData
vTempGeo[1] = vTempArr;
this.vGeoData[vTopLevelCounter] = vTempGeo;
vTempGeo = [];
vTopLevelData = geography;
vTempArr = [];
vTopLevelCounter++;
}
else {
vTempArr.push(geography);
}
}
else {
if(geography.level == vTopLevel){
vTopLevelData = geography;
vFirst = false
}
else{
console.log("populateGeoData", "First is not toplevel")
vTempArr.push(geography)
}
}
if(last){
if(geography.level == vTopLevel){
vTempGeo[0] = vTopLevelData
vTempGeo[1] = vTempArr;
this.vGeoData[vTopLevelCounter] = vTempGeo;
}
else {
vTempArr.push(geography)
this.vGeoData[vTopLevelCounter] = vTempGeo;
}
}
}
console.table("vGeoData:",this.vGeoData)
console.log('--populateGeodata','end')
return this.vGeoData;
}
},
firestore: {
Geographies: db.collection("Geographies")
},
mounted(){
},
watch:{
}
}
</script>
<style lang="stylus">
.grape {
}
</style>
THANKS