Display data with relationship in Laravel & Vue

Question

I'm trying to display data with a relationship (using many-to-many) within my Vue component.

I store users in object from rest API:

users: {}, 
//...
axios.get("api/user").then(({data}) => (this.users = data));

An example of JSON returned from api/user:

{"current_page":1,"data":[{"id":2,"name":"Andrew","description":"Testing","role":[{"id":2,"role_title":"TestTitle","pivot":{"user_id":2,"role_id":2}}

When displaying the data I can do

<tr v-for="user in users.data" :key="user.id">
<td>{{user.name}}</td> // DOES work, displays 'Andrew'

However if I try to do:

<td>{{user.role.role_title}}</td> //does NOT work, should display 'TestTitle'

It displays nothing, what am I doing wrong?

Decade Moon · Accepted Answer · 2019-05-04 03:11:47Z

6

user.role is an array of roles. To display the first role (assuming there will always be at least one role) you can do:

<td>{{ user.role[0].role_title }}</td>

answered May 4, 2019 at 3:11

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Courtney White Over a year ago

Thanks for the answer. Is there anyway I can loop over and display all the roles a given user has? I'm not sure how this is done with the current implementation in Vue.

Decade Moon Over a year ago

Just use v-for in the same way you did for each user, but instead for each role.

Courtney White Over a year ago

Oh, didn't know it was that simple. Thanks!

Collectives™ on Stack Overflow

Display data with relationship in Laravel & Vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related