Use returned object from laravel controller in vue template

Question

please how can i use object returned from laravel controller in vue component like we use in blade

for example i have 2 table user and role user has one role

users
    id - integer
    name - string

roles
    id - integer
    name - string

in controller i return an object of type user and i use it like this in blade

{{$user->role['name']}}

like this i can get the name of role

how can i get the role name of the returns user in Vue template

Answer 1

One option is to pass $user directly to component. In this case make sure to append role data in user model.

<example-component :user="{{ $user->toArray() }}"></example-component>

And then inside vue component you can print {{ user.role.name }}

You can also add an attribute in User.php model and append it

protected $appends = ['role_name'];

public function getRoleNameAttribute()
{
    return $this->role->name;
}

And then inside ExampleComponent you can print {{ user.role_name }}