Sync firebase (vuexfire) without errors and warnings

78 Views Asked by At

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?

0

There are 0 best solutions below