How to fetch data with relationship using VueJs + Laravel

Question

How can I show the user name in my table using vuejs ?

I have my users and posts table with the relationships set. A user has many posts and a post belongs to a user.

In my Posts.vue template I can now show the post table data:

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

A script looks like this:

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

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

My PostController looks like this in the index function

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

Since I have the user_id in the posts table, How can I show the user name in my table using vuejs ?

Answer 1

So I found from Laravel docummentation that I could pass the "with" function in my controller like this:

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

That gives me the posts and the user data of that post as well which allows me to access like this:

{{ post.user.name }}