Vue 无法读取未定义的属性答案

【问题标题】：Vue cannot read property of undefinedVue 无法读取未定义的属性
【发布时间】：2019-01-30 09:58:24
【问题描述】：

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

我不知道为什么，但无法在此页面上导航查看路由器。 "Cannot read property 'group' of undefined"" 这就是错误。

有人知道为什么吗？

【问题讨论】：

使用<f7-nav-title v-if="groupDetails.data">{{groupDetails.data.group.name}}</f7-nav-title> 确保只在groupDetails.data 不为空时渲染模板；为<f7-list-item>{{groupDetails.data.owner.userID}}</f7-list-item>做同样的事情

标签： vue.js vue-router html-framework-7

【解决方案1】：

检查groupDetails.data.group 为v-if，以便仅当组存在时才显示模板。这可能是由于尚未完成的异步调用造成的。

【讨论】：

【解决方案2】：

您可以拨打this.$nextTick。

this.$nextTick(()=>{ 
  //some code
});

将回调推迟到下一个 DOM 更新周期后执行。采用在您更改一些数据以等待 DOM 之后立即执行此操作更新。 https://vuejs.org/v2/api/#Vue-nextTick

【讨论】：