"comment.user.name"에서 정의되지 않은 오류 - Laravel 및 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