在 Laravel 和 Vue 中显示具有关系的数据

Question

我正在尝试在我的 Vue 组件中显示具有关系（使用多对多）的数据。

我将用户存储在来自 rest 的对象中 API:

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

从 api/user 返回的 JSON 的示例：

{"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>

Display data with relationship in Laravel & Vue