I have a Firestore with some data in it that I bind to my vuex store:
import { createStore } from "vuex";
import { vuexfireMutations, firestoreAction } from "vuexfire";
import { db } from "./db";
const store = createStore({
state() {
return {
entries: [],
};
},
mutations: vuexfireMutations,
actions: {
bindEntries: firestoreAction(({ bindFirestoreRef }) => {
return bindFirestoreRef("entries", db.collection("Items"));
}),
},
getters: {
entries(state) {
return state.entries;
},
},
});
store.dispatch("bindEntries");
export default store;
In my component, I want to display this data. I tried using this code:
<template>
<h3>Store Entries</h3>
<p>{{ entries }}</p>
</template>
<script>
export default {
computed: {
entries() {
console.log("Getting entries");
console.log(this.$store.getters.entries);
return this.$store.getters.entries;
},
},
};
</script>
The console shows me that I am getting the data:
But it does not appear:
Why not? What do I haveto change to make it appear?