Question 16442 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to use this relationship in Laravel Inertia JS?

My User model:

public function role() {
    return $this->belongsTo(Role::class);
}

My Role model:

public function count() {
    return User::where('role_id', $this->id)->count();
}

I want to retrieve how many users have a certain role in my Index.vue component.
When I type in Tinker:

$role = Role::find(1); 
$role->count();
Output: 1 -> because I have one user with a role with ID 1

My Vue component:

<li v-for="role in roles">Role name: {{ role.name }}</li>
<li>Role count: {{ role.count}}</li>

But this not works as planned.

My RoleController where I passed the ‘roles’ variable to Index.vue component:

public function index()
{
    return Inertia::render('Roles/Index', [
        'roles' => Role::all(),
    ]);
}

I want to display it like this:

Role name: Administrator

Role count: 1

Role name: Subscriber

Role count: 5

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution for this: You need to return the collection inside your controller:

     return Inertia::render('Roles/Index', [
        'roles' => RoleResource::collection(Role::all()),
 ]);

    Then create RoleResource.php using the command: php artisan make:resource RoleResource

    And finally inside your RoleResource return these:

    return [
        'id' => $this->id,
        'name' => $this->name,
        'count' => User::where('role_id', $this->id)->count(),
];

    Inside your Index.vue file add "roles" as prop as object like this: props: {roles: Object}

    And foreach your roles:

    <tr v-for="role in roles.data">
{{role.id}} // This will print your role id
{{role.name}} // This will print your role name
{{role.count}} // This will print how much users have that role
</tr>

    Final result: enter image description here


  2. 0

    if count is not a column on the role table, you will need to pass that data to Vue,
    unlike blade, Vue doesn’t have access to model/collection methods

    I always use resources to transform my data to my javascript front end. see documentation https://laravel.com/docs/9.x/eloquent-resources

    RoleResource

     return [
        'id' => $this->id,
        'name' => $this->name,
        'email' => $this->role()
        // .... 
    ];

    now

    public function index()
{
    return Inertia::render('Roles/Index', [
        'roles' => RoleResource::collection(Role::all()); //remember to import RoleResource
    ]);
}

    Check if this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search