updated: 2019/10/15

Vue@2.6.10

Vuex@3.1.1

前回の

http://monteecristoo.hatenablog.com/entry/2019/09/16/074708

と同様にデータ取得のタイミングに関するエラー対応について

syntaxでデフォルトで定義されていないディープにネストされたプロパティを含むデータを使用した場合、参照エラーが出る。

前回のようにあらかじめ空のデータを定義できればよいが、何らかの理由でそれもできない場合、

…（今回は）

<v-img :src="getDataMixin(header)">

computed: {

　　header() {

　　　　if(this.$store.state.hoge.hoge === "hoge") {

　　　　　　return this.$store.state.datas[this.$route.params.id].hoge.hoge

　　　　} else {

　　　　　　return defaultData;

　　　　}

ここでheaderはvue debugger上では正しい値が取得できているがsyntaxのgetDataMixin(header)はthis.$store.state.datas[this.$route.params.id].hoge.hogeを参照し、this.$store.state.datas[this.$route.params.id].hoge.hogeは値が解決されてない段階のものを参照してしまいエラーが出る？？？

v-ifでレンダリングタイミングを調整することで解決

<v-img :v-if="this.$store.state.datas[this.$route.params.id].hoge" src="getDataMixin(header)">