How to use this relationship in Laravel Inertia JS? - php

Question

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

Answer 1

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

Answer 2

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: