I have a firestore binding in my vuex store, on which one frontend element depends. Here is some example code:
Vue Template:
<v-list-item
v-if="dependantGetter"
@click="doSomething()">
<v-list-item-title>Do something</v-list-item-title>
</v-list-item>
Vue Script:
computed: {
...mapGetters(["dependantGetter"]),
}
Vuex Store:
const state = {
settings : [],
}
const getters = {
dependantGetter: ({ settings }) => {
let check = settings.filter(setting => setting.id === 'idName')
return check[0].startSync
}
}
But the problem I have is, that the browser throws multiple errors until the binding becomes true
or false
:
[Vue warn]: Error in render: "TypeError: Cannot read property 'startSync' of undefined"
TypeError: Cannot read property 'startSync' of undefined
[Vue warn]: Error in render: "TypeError: Cannot read property 'startSync' of undefined"
TypeError: Cannot read property 'startSync' of undefined
[Vue warn]: Error in render: "TypeError: Cannot read property 'startSync' of undefined"
TypeError: Cannot read property 'startSync' of undefined
My solution so far is to return the getter like this from inside vuex
, but this really doesn't look right to me
return check[0] == undefined ? false : check[0].startSync
Or is this the right way to return things, when working with firebase and vuexfire?