"comment.user.name"の未定義エラー - Laravel and VueJS

Question

Laravel 5、VueJS 2、Vuexを使用してコメントシステムを構築しました。私はすべてのコメントを取得することができますし、comment.user.usernameはうまく動作します。 しかし、私は私のコンソールでこのエラーを取得し、新たなコメントを投稿したとき：

[Vue warn]: Error in render function: "TypeError: _vm.comment.user is undefined" 

私はcomment.user_idとcomment.user.nameを交換し、私はその作品、投稿した場合。 comment.created_atも機能します。 comment.user.nameページをリロードすると、ユーザー名が表示されます。 しかし私が投稿するとき、私は不確定なエラーを得る

コメントとユーザーモデルの関係が定義されています。 どうすればこのエラーを解決できますか？

Answer 1

私のコメントテーブル

マイComments.vueユーザー名が機能

<template> 

<div class="ui comments innerAllWithoutTop"> 
    <div class="ui inverted active dimmer" v-if="loading"> 
     <div class="ui text loader">Chargement des commentaires...</div> 
    </div> 
    <h4 class="ui dividing header">Les commentaires</h4> 
    <comment :comment="comment" v-for="comment in comments" :key="id"></comment> 
    <comment-form :id="id" :model="model"></comment-form> 
</div> 

</template> 
<script type="text/babel"> 
import axios from 'axios' 
import Comment from './comments/Comment.vue' 
import CommentForm from './comments/Form.vue' 
import store from '../store/Store' 


export default { 
    data() { 
    return { 
     loading: true, 
    } 
    }, 
    computed: { 
    comments: { 
     get: function() { 
      return store.state.comments 
     }, 
     set: function (comments) { 
      store.commit('ADD_COMMENTS', comments) 
     } 
    } 
    }, 
    components: { Comment, CommentForm }, 
    props: { 
    id: Number, 
    model: String 
    }, 
    methods: { 
    getComments() { 
     axios.get('/comments', {params: { 
     type: this.model, id: this.id 
     }}).then((response) => { 
     this.comments = response.data 
     }).then(() => { 
     this.loading = false 
     }); 
    } 
    }, 
    mounted() { 
    this.getComments(); 
    } 
} 
</script> 

マイcomment.vue

<template> 
    <div class="comment"> 
     <a class="avatar"> 
     <img :src="comment.user.profile.photo"> 
     </a> 
     <div class="content"> 
     <a class="author">{{ comment.user.username }}</a> 
     <div class="metadata"> 
      <span class="date">{{ comment.created_at }}</span> 
     </div> 
     <div class="text"> 
      {{ comment.content }} 
     </div> 
     <div class="actions"> 
      <a class="reply">Répondre</a> 
     </div> 
     </div> 
     <div class="comments" v-if="comment.reply == 0"> 
     <comment :comment="reply" v-for="reply in comment.replies" :key="reply.id"></comment> 
     <!--<comment-form :model="comment.commentable_type" :id="comment.commentable_id" :reply="comment.id" v-if="comment.reply == 0"></comment-form>--> 
     </div> 
    </div> 
</template> 

<script> 
import CommentForm from './Form.vue' 

    export default { 
    name: 'comment', 
    components: { CommentForm }, 
    props: { 
     comment: Object 
    } 
    } 
</script> 

コメントの作品が、私はコメントを投稿するとき、私は未定義のコメントを取得.user in Console