Показать данные с отношениями в Laravel & Vue

Question

Я пытаюсь отобразить данные с отношением (используя многие ко многим) в моем компоненте Vue.

Я храню пользователей в объекте из API остальных:

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

Пример JSON, возвращенный из 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}} 

При отображении данных я могу сделать

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

Однако, если я попытаюсь сделать:

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

Ничего не отображается, что я делаю не так?

Answer 1

user.role - это массив ролей. Чтобы отобразить первую роль (при условии, что всегда будет хотя бы одна роль), вы можете сделать:

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