vue.js - Fetched Vuex store item throws undefined and then renders fine

Question

I'm assuming I have a race condition going on where the component isn't hydrated in time for the first render? I'm not sure where in the component lifecycle I should fetch from the store.

I'm getting [Vue warn]: Error in render: "TypeError: _vm.currentLogbook.entries is undefined" in the conosle, but then it renders fine.

    <b-container fluid >
        <b-row>
            <b-col cols="6">
                <h1> {{currentLogbook.title}}</h1>
            </b-col>
            <b-col cols="6" class="text-right">
                <b-button disabled>
                    Total Entries <b-badge variant="dark">{{ currentLogbook.entries.length }}
                </b-badge>
                </b-button>
            </b-col>
        </b-row>
        <b-row>
            <b-col cols="8">
                <ParksOnTheAirForm :qso="currentQso" v-if="currentLogbook.template === 'Parks on the Air'" />
            </b-col>
            <b-col cols="4">
                <FrequencyInfoForm :qso="currentQso"/>
            </b-col>
        </b-row>
        <b-row class="entries-list">
            <b-col cols="12">
                <LogbookEntriesList/>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
import ParksOnTheAirForm from '@/components/entries/ParksOnTheAirForm'
import FrequencyInfoForm from '@/components/logbooks/FrequencyInfoForm'
import LogbookEntriesList from '@/components/entries/LogbookEntriesList'
import {mapGetters} from 'vuex'
export default {
    components: {
        ParksOnTheAirForm,
        FrequencyInfoForm,
        LogbookEntriesList
    },
    computed:{
        ...mapGetters(['currentLogbook', 'currentQso'])
    },
    mounted() {
        this.$store.dispatch('fetchCurrentLogbook', this.$route.params.id)
        this.$store.dispatch('initNewQso')
    },

}

question from:https://stackoverflow.com/questions/65874977/fetched-vuex-store-item-throws-undefined-and-then-renders-fine

Answer 1

The issue is that you initialize currentLogbook to an empty object. Then once the data are fetched currentLogbook is properly initialized

=> So as long as fetching data is not completed currentLogbook is an empty object!

This also mean that while currentLogbook={}, currentLogbook.title===undefined as well as currentLogbook.entries===undefined

=> So when loading the page you try to render undefined.length which cause an error