前提・実現したいこと
前提
dataプロパティのcontainerにはcreated経由でデータを動的に生成し、注入します。
実現したいこと
Vueのインスタンスライフサイクルをうまく活用して、createdで動的に生成されるデータにcomputedからアクセスしたいです
####エラー等
タイトルの通り、createdで動的に生成されるデータにcomputedからアクセスする際に、createdでのデータ生成のタイミングよりもcomputedの生成の方が早く、データ未生成の状態でcomputedからアクセスしてしまい、undefindeになります。
"Cannot read property 'content' of undefined"
以下の例でいうと、hogeComputedでcontainer.fuga.contentにアクセスしようとして、そもそもcontainerにfugaが存在しないため、undefindeになり、undefindeにcontentでアクセスするので上記のエラーが発生しています。
該当のソースコード
hoge.vue
1<script> 2 export.default { 3 data() { 4 return { 5 container: [] 6 } 7 }, 8 computed() { 9 hogeComputed() { 10 this.container.fuga.content 11 } 12 }, 13 created() { 14 this.$set(container, 'fuga', {content: 'dummy'}) 15 } 16 } 17</script>
試したこと
hogeComputedの一行目にアクセス予定のデータの存在確認を入れて、データがなければ別途作成するようにしました。
このような方法ではなく、Vueのインスタンスライフサイクルを活用してうまく生成したいです。
hoge.vue
1<script> 2 export.default { 3 data() { 4 return { 5 container: [] 6 } 7 }, 8 computed() { 9 hogeComputed() { 10 // ここに存在確認を入れて、必要データがなければ別途作成するようにしました。 11 if (!this.container.fuga) { 12 this.$set(container, 'fuga', {content: 'dummy'}) 13 } 14 15 this.container.fuga.content 16 } 17 }, 18 created() { 19 this.$set(container, 'fuga', {content: 'dummy'}) 20 } 21 } 22</script>
補足情報(FW/ツールのバージョンなど)
- Vue: 2.5.17
あなたの回答
tips
プレビュー