vuejs2 - 如何使用 VueJs + Laravel 获取有关系的数据

Question

如何使用 vuejs 在我的表中显示用户名？

我有我的用户和帖子表，并设置了关系。一个用户有很多帖子，一个帖子属于一个用户。

在我的 Posts.vue 模板中，我现在可以显示帖子表数据:

<tr v-for="post in posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body | snippet }}</td>
</tr>

脚本如下所示:

<script>
    export default {
        data(){
            return{
                posts: []
            }
        },

        methods: {
            showPosts(){
                axios.get('/app/posts').then(response => {
                    this.posts = response.data.posts;
                });
            }
        },
       mounted(){
            this.showPosts();
       }
    }
</script>

我的 PostController 在 index 函数中看起来像这样

 public function index()
 {
    //
    $posts = Post::all();
    return response()->json([
        'posts' => $posts,
    ], 200);
 }

由于我在帖子表中有 user_id，
如何使用 vuejs 在我的表中显示用户名？

Answer 1

所以我从 Laravel 文档中发现我可以像这样在我的 Controller 中传递“with”函数:

$posts = Post::with('user')->get();

这也为我提供了该帖子的帖子和用户数据，这使我可以像这样访问:

{{ post.user.name }}