loginUser.user_profile.last_name
など3つネストしているオブジェクトでは以下のエラーが出てしまいます。
原因が分かる方いらしゃいましたら、教えていただきたいです。
[Vue warn]: Error in render: "TypeError: Cannot read property 'last_name' of undefined" ... TypeError: Cannot read property 'last_name' of undefined ...
コンポーネント
<template> <div class="user-edit"> <h2>プロフィール編集</h2> {{ loginUser.email }} {{ loginUser.user_profile }} {{ loginUser.user_profile.last_name }} </div> </template> <script> import {mapState} from 'vuex' export default { computed: { ...mapState({ loginUser: state => state.loginUser.loginUser }) }, mounted() { this.$store.dispatch('loginUser/getLoginUser'); } } </script>
vuexを使っていて、getLoginUserというactionでaxiosを使ってAPIでデータを取ってきています。
よろしくお願いいたします。
補足
(1)...last_name以外の文字列は想定通りに表示されていますか?
last_name以外の文字列も問題なく表示はされますがwarnが出ます。
(2)また、データ取得時に、想定通りにデータが取得できているかをデバッガ等で確認はされましたか?その値はどうだったでしょうか?
vueのデバッガでは以下のように値は入っていました。なのでundefinedにはならないはずなのですが読み込みタイミングなきがしています。
loginUser:Object loginUser:Object email:"test@gmail.com" id:8 name:"yamada" user_profile:Object birth_date:null created_at:null first_name:"太郎" gender_id:null last_name:"山田" updated_at:"2018-10-26 02:31:29" user_id:8
回答2件
あなたの回答
tips
プレビュー