在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>