I am currently using Laravel, Inertiajs and Vuejs to create a blog, and I need some help with the logic in getting the username.

I have 3 tables:

Users:

• id (pk)
• name

Blogs:

• id (pk)
• user_id (foreign key)

Comments:

• id (pk)
• blog_id (foreign key)
• user_id (foreign key)

I have a blog page, which is nested inside a dynamic route from web.php:

Route::get('/blogs/{id}', [BlogController::class, 'show'])->name("blogs.show");

The blog page contains a blog post and a comment section, which is being called by a BlogController:

public function show(Blog $id)
    {
        $user = User::find($id->user_id)->name;

        return Inertia::render('Components/Blog', [
            'blog' => [
                    'id' => $id->id,
                    'name' => $user,
                    'title' => $id->title,
                    'body' => $id->body,
                    'created_at' => $id->created_at,
                    'updated_at' => $id->updated_at,
                    'comments' => $id->blogComments()->orderByDate()->get()->all(),
            ],
        ]);
    }

As far as getting the user name of the blogger, it works just fine in $user = User::find($id->user_id)->name; and called back from the Vue component as a blog prop: <p>{{ blog.name }}</P>. Now, what I want is to also call the username in the comment section (see Target below).

The comment section above is being called from the show() method in the BlogController:

<template>
  <div>
    <div
      v-for="comment in blog.comments"
      :key="comment.id"
      class="hover:bg-gray-100 focus-within:bg-gray-100"
    >
      <p>comment id: {{ comment.id }}</p>
      <p>comment body: {{ comment.body }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    blog: Object,
  },
};
</script>

But my problem is, I couldn't quite get my head around the logic in getting the user name from the Users table inside the show() method. As of now, there is a one-to-many relationship from Blogs table to the Comments table by calling the foreign key in the Comments table to the primary key in the Blogs table at the controller: 'comments' => $id->blogComments()->orderByDate()->get()->all(),

So how do I add another layer in this by calling the foreign key in the Comments table (inside a BlogController) to the primary key in the Users table?

I have been at this for a few hours and I am sure I am just missing something simple, so I would appreciate if there is a fresh pair of eyes to look at this.

Thank you.

CodePudding user response：

If I have guessed correctly, I think you want to add the comment's author name in the comment section.

Therefore, you need to add relationship between comment and user as below:

class Comment extends Model
{
    /**
     * Get the author that wrote the book.
     */
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

And then change the comment in your Inertia as bellow to load the user model:

'comments' => $id->blogComments()->with('users')->orderByDate()->get()->all(),

Then you can get the comment author like this:

<div
  v-for="comment in blog.comments"
  :key="comment.id"
  class="hover:bg-gray-100 focus-within:bg-gray-100"
>
  <p>comment id: {{ comment.id }}</p>
  <p>comment body: {{ comment.body }}</p>
  <p>comment author: {{ comment.user.name }} </p>
</div>

Please try this and let me know if it works.