なんかエラーを吐いていたが、いまいち原因がわかんなかった奴の原因を掴んだのでメモ。
こんなエラー
![](https://t-salad.com/wp-content/uploads/2020/01/-2020-01-21-16.26.04-e1579597245858.png)
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
を使って、データの取得がされないうちは表示しないようにする。これで解決。
参考
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlanMlRTMlODElQTdUeXBlRXJyb3IlM0ElMjBDYW5ub3QlMjByZWFkJTIwcHJvcGVydHklMjAlMjdob2dlJTI3JTIwb2YlMjB1bmRlZmluZWQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWM4MmIzN2Y2YmYwMmUxZDJmNWUwNTUzZWU0NTdmZGJj&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpa2VtdXJhMjMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWJkZDA4YjZiNGJmOGM2MjUwYWQ5ZTUwYTdkNmU1NDhl&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g5qCq5byP5Lya56S-44KG44KB44G_&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=78a63a0921a1b90165e768646f1923bb)
VuejsでTypeError: Cannot read property 'hoge' of undefined - Qiita
環境"firebase": "^3.7.8","vue": "^2.2.2",現象firebase databaseから値取得してVueで表示させようとしたらconsoleに以下のエラーが出…