<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?
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.