Question

我在通过道具从VueJS组件中访问雄辩者的关联时遇到问题。

正在将模型对象传递给vue组件，如下所示：

评论模型

public function post()
{
   return belongsTo('App\Post');
}

评论控制器

$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>

但是，如果我在控制器中循环并转储该帖子，则该帖子将显示在vue模板中：

$comments = Comment::all()

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

Answer 1

由于您是在comment.blade上使用Vue的，因此在您通过控制器上的post访问$comment->post->title时不会延迟加载post。

来自Laravel docs：

在访问口才关系作为属性时，该关系数据是“延迟加载”。这意味着关系数据不是直到您首次访问该属性时才真正加载。

由于您正在使用Vue（客户端）访问{{ comment.post.title }}，因此延迟加载将无法进行，因此，当您像这样访问undefined时，它不会被加载，导致其值为{ {1}}。

要解决此问题，您可以通过执行此操作来急于加载评论post。

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

如果您不懒加载评论的帖子并且评论变得更大，则可能会导致N + 1查询问题导致性能问题。

通过props在vuejs中的口才关系属性

1 个答案: