title: laravel Vue.js : Error in render: "TypeError: Cannot read property 'user' of null"
body: <p>I am creating commenting system using Vue.js and laravel 5.8.
  I want to show comments in blog post page (show.blade.php) but I got an error </p>
  
  <blockquote>
    <p>Error in render: "TypeError: Cannot read property 'user' of null"</p>
  </blockquote>
  
  <p>In my chrome vue dev tool, I could get objects, but I cannot show comments.</p>
  
  <blockquote>
    <p>I want to retrieve and show user name and user's comment.</p>
  </blockquote>
  
  <p>I am glad if someone helps me out.</p>
  
  <p>comments.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="commentarea" &gt; 
      &lt;div class="comment-posts" &gt;
          &lt;div class="user-comment-area" &gt;
              &lt;div class="user-post"&gt;
                  &lt;!---&lt;img src="{{asset('people/person7.jpg')}}" class="image-preview__image"&gt;---&gt;
                  &lt;input type="text" name="comment"&gt;
              &lt;/div&gt;
              &lt;div class="comments-buttons"&gt;
                  &lt;button class="cancel-button"&gt;Cancel&lt;/button&gt;
                  &lt;button class="comment-button" type="submit"&gt;Comment&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;h4&gt;Comments ()&lt;/h4&gt;
  
          &lt;div class="reply-comment" v-if="comment.user" v-for="comment in comments.data"&gt;
                  &lt;div class="user-comment"&gt;
                  &lt;div class="user"&gt;
                      &lt;!---&lt;img src="{{ $comment-&gt;user-&gt;img }}" class="image-preview__image"&gt;---&gt;
                      &lt;avatar :username="comment.user.name"&gt;&lt;/avatar&gt;
                  &lt;/div&gt;
                  &lt;div class="user-name"&gt;
                      &lt;span class="comment-name"&gt;{{ comment.user.name }}&lt;/span&gt;
                      &lt;p&gt;{{ comment.body }}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="reply"&gt;
                  &lt;div class="seemorecomments"&gt;
                      &lt;a href=""&gt;see more&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;button class="reply-button"&gt;
                      &lt;i class="fas fa-reply"&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;button  class="load"&gt;Load More&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Avatar from 'vue-avatar'
  export default {
      props: ['post'],
      components: {
          Avatar
      },
      mounted() {
          this.fetchComments()
      },
      data: () =&gt; ({
          comments: {
              data: []
          }
      }),
      methods: {
          fetchComments() {
              axios.get(`/results/${this.post.id}/comments`).then((data) =&gt; {
                  this.comments = data
              })
              .catch(function (error) {
              console.log(error.response);
              })
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>web.php</p>
  
  <pre><code>Route::get('results/{post}/comments', 'CommentController@index');
  </code></pre>
  
  <p>ResultsController.php</p>
  
  <pre><code>public function show(Post $post)
  {
      $recommended_posts = Post::latest()
                          -&gt;whereDate('date','&gt;',date('Y-m-d'))
                          -&gt;where('category_id','=',$post-&gt;category_id)
                          -&gt;where('id','!=',$post-&gt;id)
                          -&gt;limit(7)
                          -&gt;get();
  
      // load the post comments here
      $post-&gt;load('comments');
      $posts['particular_post'] = $post;
      $posts['recommended_posts'] = $recommended_posts;
  
      return view('posts.show',compact('posts'));
  }
  </code></pre>
  
  <p>CommentsController.php</p>
  
  <pre><code>public function index(Post $post)
  {
      return $post-&gt;comments()-&gt;with('user')-&gt;paginate(5);
  }
  </code></pre>
  
  <p>comment.php</p>
  
  <pre><code> protected $with = ['user'];
  </code></pre>
  
  <p>show.blade.php</p>
  
  <pre><code>&lt;comments-component :post="{{ $posts['particular_post'] }}"&gt;&lt;/comments-component&gt;
  </code></pre>