Vue cannot read property of undefined

Question

<template>
  <f7-page>
    <f7-navbar>
        <f7-nav-left back-link="Zurück"></f7-nav-left>
        <f7-nav-title>{{groupDetails.data.group.name}}</f7-nav-title>
        <f7-nav-right></f7-nav-right>
    </f7-navbar>
    <f7-list>
        <f7-list-item>{{$f7route.params.groupKey}}</f7-list-item>
        <f7-list-item>{{groupDetails.data.owner.userID}}</f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import *  as firebase from 'firebase'

export default {
    beforeCreate: function() {
        var this_ = this
        firebase.firestore().collection("groups").doc(this_.$f7route.params.groupKey).onSnapshot({
            includeMetadataChanges: true
        }, function(doc) {
            this_.groupDetails = ({data: doc.data()})
            console.log(this_.groupDetails)
        })

    },
    data() {
        return {
            groupDetails: []
        }
    }
}
</script>

I dont know why but cant navigate on this Page view a Router. "Cannot read property 'group' of undefined"" thats the Error.

Does anyone know why?

Answer 1

Check for groupDetails.data.group as a v-if, so that it is displaying the template only if group exists. This could be due to an asynchronous call that has not finished yet.