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

Question

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

我将用户存储在来自其他API的对象中：

map and connect each sensor with attributes in the Java class

从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'

它什么也没显示，我在做什么错了？

Answer 1

user.role是一系列角色。要显示第一个角色（假设总是会有至少一个角色），您可以执行以下操作：

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