【Vue.js】見た目は正常なのにエラーが出る

なんかエラーを吐いていたが、いまいち原因がわかんなかった奴の原因を掴んだのでメモ。

こんなエラー
実際のソースコード（の一部）
このエラーの原因
対処法
参考

こんなエラー

TypeError: Cannot read property 'name' of null

とりあえず、nameが nullってことは分かる。

が、しかし……

実際のソースコード（の一部）

<template>
  <div class="profile">
    <div class="user_info">
      <p class="namefont">{{ loggedinUserInfo.name }}</p>
      <p class="kanafont">{{ loggedinUserInfo.kana }}</p>
    </div>
    <button class="btn_rtn" @click="toMain()">TOPに戻る</button>
  </div>
</template>

<script>
import firebase from 'firebase/app'
export default {
  data () {
    return {
      uid: null,
      loggedinUserInfo: null
    }
  },
  created: function () {
    firebase.auth().onAuthStateChanged(user => {
      this.uid = firebase.auth().currentUser.uid
      firebase.database().ref('userList/' + this.uid).on('value', (snapshot) => {
        this.loggedinUserInfo = snapshot.val()
      })
    })
  },
......

nameはloggedinUserInfo.nameの形でしか使用していないし、これも間違いなく取得できている（実際にこのページを表示すると、loggedinUserInfo.nameの部分は表示される。（がエラーが出る）

このエラーの原因

「表示時にloggedinUserInfo.nameを表示しようとした時点で、まだfirebaseからデータが取得できておらず、nullエラー→その後、取得してデータが反映される」という挙動をとっていたことが原因だった。

その下の行のkanaはデータの取得が間に合っていたためにエラーに出なかった（？）

見た目上、ちゃんと表示されていたので、気づかなかった…w

対処法

<p class="namefont" v-if="loggedinUserInfo">{{ loggedinUserInfo.name }}</p>
<p class="kanafont" v-if="loggedinUserInfo">{{ loggedinUserInfo.kana }}</p>

v-ifを使って、データの取得がされないうちは表示しないようにする。これで解決。

参考

VuejsでTypeError: Cannot read property 'hoge' of undefined - Qiita

環境 "firebase": "^3.7.8", "vue": "^2.2.2", 現象 firebase databaseから値取得してVueで表示させようとしたらconsoleに以下のエラーが出た。 vue.esm.js?65d7:55...