Блог

У меня возникла проблема с доступом к ассоциации eloquent из компонента VueJS через props.

Итак, я передаю объект модели компоненту vue, вот так:

Модель комментариев

 public function post()
{
   return belongsTo('AppPost');
}
  

Контроллер комментариев

 $comments = Comment::all()
return view('comments', ['comments' => $comments);
  

блок комментариев

 <comment-index :comments="{{ $comments }}"></comment-index>
  

комментарий к компоненту vue

 <template>
   <div>
      <table>
          <tr v-for="comment in comments">
             <td>{{ comment.message }}
             <td>{{ comment.post.title }} // post is undefined
          </tr>
      </table>
   </div>
</template>
<script>
    export default {
        props: ['comments'] 
    }
</script>
  

Но если, если я зациклю и дамп post в контроллере, post отобразится в шаблоне vue:

 $comments = Comment::all()

foreach($comments as $comment) {
   dump($comment->post->title);
}
return view('comments', ['comments' => $comments);
  

Поскольку вы используете Vue на comment.blade , post он не загружается с задержкой, пока он загружается с задержкой, когда вы обращаетесь к нему через $comment->post->title на вашем контроллере.

Из Laravel docs :

При доступе к отношениям Eloquent в качестве свойств данные отношения «загружаются лениво». Это означает, что данные связи фактически не загружаются до тех пор, пока вы не получите первый доступ к свойству.

Поскольку вы используете Vue (на стороне клиента) для доступа post , отложенная загрузка не будет работать, и, следовательно, он не загружается, когда вы обращаетесь к нему следующим образом: {{ comment.post.title }} что приводит к тому, что его значение равно undefined .

Чтобы решить эту проблему, вы можете быстро загрузить комментарий post , выполнив это.

 $comments = Comment::with('post')->get();
  

Кроме того, если вы не загружаете запись комментария, а комментарии становятся больше, это может привести к некоторой проблеме с производительностью при N 1 проблеме запроса.