updated: 2019/12/11
Vue@2.6.10
Vuex@3.1.1
あるdata, vuex stateプロパティ等の初期値をnullにしておくと
参照したvue syntaxで値は正しく取得されるがコンソールにnullを参照したことによるエラーが表示される。
""や{}等適当な値を初期値にセットしておくとコンソール上のエラーが表示されなくなる。
ネストされた値をsyntaxで参照されている場合は初期値も一段ネストさせて設定する。
例えば
data() {
return {
userData: null
}
}
後からuserDataに値を挿入
getUserData(response) {
this.userData = response
}
template内
<v-avatar :src="userData.avatar">
error 値は正しく取得されているがコンソールにCannot read property 'avatar' of nullとエラー
これを直すには
data() {
return {
userData: ""
}
}
さらに、syntaxでもう一段ネストされている値が参照される場合、例えばtemplate内で
{{ userData.details.about }}
上記でもエラーが出る。
これを直すには
data() {
return {
userData: {details: ""}
}
}
もう一段適当な値を初期値としてセットしておくとコンソール上のエラー表示がなくなる。
→ つまり、data を初期値nullにして後入れでオブジェクトごとぶっこむのではなく、あらかじめ設定したデータのJsonオブジェクトのプロパティに後入れデータとして値をひとつづつ入れていく。
空の初期値を設定しておくのが困難なケースや気持ち悪い場合、v-ifでレンダリングタイミングを調整することでエラー対応ができる。
<v-avatar v-if="userData" :src="userData.avatar">
参考：
