I am exploring Vue.js and Firestore for the first time, working on a project that is slightly bigger in scale. Within my Firestore database, I have a collection with three documents. My goal is to extract the document IDs and store them in an array. The component responsible for this task is structured as follows:
<template>
<div class="main">
<button @click="getIds" class="nextBtn">Next</button>
</div>
</template>
<script>
import { computed } from 'vue';
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore();
const questdb = computed(() => store.state.questdb);
let idArray = [];
function getIds() {
this.questdb.onSnapshot(function(doc) {
doc.forEach(doc => {
try{
this.idArray.push(doc.id);
}
catch(error) {
console.log("Error: ", error);
}
})
})
}
return {
store,
questdb,
idArray,
getIds
}
},
methods: {
}
}
</script>
An error message appears stating:
TypeError: Cannot read property 'push' of undefined
If I simply console.log() the document IDs, everything works smoothly.
It seems like there may be an issue with how data is being added to the array or perhaps I need to deepen my understanding of retrieving data from Firestore.