I encountered an issue described above. Can someone help me identify what went wrong? My goal is to display all documents in the 'hives' collection. Is the code snippet shown in the second image correct? Or do I need to make some modifications? Should I include a rule in Firebase?
https://i.sstatic.net/nnb2F.png
https://i.sstatic.net/L2HfK.png
index.js
import * as fb from '../firebase';
const store = new Vuex.Store({
state: {
hives: [],
},
mutations: {
setHives(state, val) {
state.hives = val;
},
},
actions: {
async getHives() {
await fb
.collectionGroup('hives')
.get()
.onSnapshot((snapshot) => {
let hivesArray = [];
snapshot.forEach((doc) => {
let hive = doc.data();
hive.id = doc.id;
hivesArray.push(hive);
});
store.commit('setHives', hivesArray);
});
},
},
});
export default store;
Hives.vue
<template>
<ul class="content__list" v-if="hives.length">
<li class="content__item">
<p>ID</p>
<p>Apiary Name</p>
</li>
<li class="content__item" v-for="hive in hives" :key="hive.id">
<p class="content__apiary-name">
{{ hive.hiveId }}
</p>
<p class="content__apiary-name">
{{ hive.apiary.apiary }}
</p>
</li>
</ul>
</template>
<script>
export default {
created() {
this.getHives();
},
methods: {
getHives() {
this.$store.dispatch('getHives');
},
},
};
</script>