Laravel-permission: getRoleNames() from Vue, Error in render: "TypeError: user.getRoleNames is not a function"

[Xoshbin]

Hi, I have searched a lot, but it looks like no one had this issue before. I'm trying to show the roles for the users in a table in Vue.js but it's not working. it's showing

Error in render: "TypeError: user.getRoleNames is not a function"

That's my code in the Vue component:

<tr v-for="user in users.data" v-bind:value="user.id" v-bind:key="user.id">
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.getRoleNames() }}</td>

So I was asking if there's any way that I can access getRoleNames() from Vue please.

[AlexMalikov94]

Can you send what is a return is a users? Do it a return getRolesName? I think it is a collection. I think need iterate this function.
```
public function getRoleNames(): Collection
{
return $this->roles->pluck('name');
}

[Xoshbin]

<td>{{ user.getRoleNames() }}</td>
This one is returning error:

Error in render: "TypeError: user.getRoleNames is not a function"

and this line below is returning empty:
<td>{{ user.getRoleNames }}</td>
and

getRolesName

the one you mentioned is empty too.

and this line below:
<td><p v-for="role in user.getRoleNames()" v-bind:value="role.id" v-bind:key="role.id">{{role}}</p></td>
Giving the same error as above:

Error in render: "TypeError: user.getRoleNames is not a function"

and this one is empty too:
<td><p v-for="role in user.getRoleNames" v-bind:value="role.id" v-bind:key="role.id">{{role}}</p></td>

[AlexMalikov94]

Under <tr> , can you add
{{ users.data }}
What is returning just need to see what is return only name and email and what else? Output can send or just update your comment. I need to see returning the object to see when you send Axios call

[Xoshbin]

it's returning:

 [
  {
    "id": 1,
    "name": "Admin",
    "email": "[email protected]",
    "email_verified_at": null,
    "created_at": "2020-05-26T17:58:29.000000Z",
    "updated_at": "2020-05-26T17:58:29.000000Z",
    "address": null,
    "phone": null,
    "sex": "Male",
    "birthdate": "",
    "blood_group": "O+",
    "parent_id": null,
    "city_id": null,
    "deleted_at": null
  },
]

There's Nothing about roles. But when I use user.getRoleNames() in the blade it's returning all the roles that belong to the user. So I'm mentioning this to know that the relationship is working.

[AlexMalikov94]

I see the similar question I answered for Laravel Permission, maybe help you in SO

https://stackoverflow.com/questions/53312875/vue-js-with-laravel-permission

[Xoshbin]

I think I saw it before, but it's different because it's checking the permission for the current user "Only one user", but in my situation I'm checking every roles that the users have in the users list.

[AlexMalikov94]

If you say you need to get all users with roles. This method doesn't need this. If you have a relation between users and roles.

$users = User::with('roles')->get();

You can send JSON to your data. It depends on your structure code
```
return response()->json([
'users' => $users
]);

[Xoshbin]

Thank you @AlexMalikov94 It worked.