如何将 hasOne 关系数据从 laravel controller 传递到 Vue 前端

Question

I am trying to make a blog like app using Laravel and Vue but got stuck at a point. While developing the admin panel, I wanted a "Assign role" feature there where the admin can assign a user with particular role like "Admin, Moderator or Author" For that, I defined a relationship in User model

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

Now in Vue, I want to display a table with all user names with their Roles besides them. For that, I sent a request to laravel server to fetch all data from Users table, the users table have the fields below

id, name, role_id, email, password, created_at, updated_at

I have a relationship defined in the Role model aswell

public function Users() {
    return $this->hasMany(User::class);
}

Now when I fetch all users, I do

$users = User::all();
return $users;

How can I get the Role name inside my table, from the data i sent above. Right now, I am only getting the role_id that is 1,2 or 3 but I want the names of the roles.

Thanks in advance

Answer 1

You need to change your relation.

User Model

public function role(){
   return $this->belongsTo(App\Role::class, 'role_id', 'id')
}

You can use the role relation and get the name from there.

// Eager load the relation
$users = User::with('role')->get();
return $users;

In your html.

$user->role->name;

Answer 2

I think one of your relationships is wrong for starters, should be

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

To minimize database queries do this:

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

Now you can do something like

$users->toJson()

if you want to pass all the data to a javascript.

Or you can do

@foreach($users as $user)
    {{ $user->role->name }}
@endforeach

The important thing is that the with statement loads all the relationships in advance and so only one database query is executed.

Answer 3

$users = User::all();
foreach($users as $user) {
    $user->role;
}
return $users;

Believe it or not, that's all you need to do to populate the relationship inside any generated JSON. You just have to call the "magic method"