vue组件中不显示Laravel的vue数据

Question

我希望从我的API请求显示数据，但它似乎是错误的东西，我无法找出它是什么…当我尝试循环时，数据没有显示在页面上。我通过邮递员从API获取数据。如果有什么地方没有解释清楚，请写点什么……

这是我的api.php路线:get("/用户","Api UserController@index");

这是ApiUserController:

public function index()
{
return UsersResource::collection(User::all());
}

这是vue脚本:

<script>
export default {
data: function () {
return {
users: [],
}
},
mounted() {
this.loadUsers();
},
methods: {
loadUsers: function () {
axios.get('api/user')
.then((response) => {
this.users= response.data.data;
})
.catch(function (error) {
console.log(error);
})
}
}
}
</script>

这是我试图将数据放入的表:

<table >
<tr>
<th>
<div class="form-text">
TOP 10 USERS
</div>
</th>
<th>RATING</th>
<th>DEAL</th>
<th>LINK</th>
</tr>
<tr v-for="user in users" :key="user.id">
<td class="text-white">
{{user.name}}
</td>
<td>/5</td>
<td>% Discount</td>
<td>
<button class="btn buttonGlowGreen">VISIT</button>
</td>
</tr>
</table>

Answer 1

在你的loadUser方法中，你通过response关键字获得响应，然后你必须在vue中为你的用户对象设置。

用this.users= response.data.data;代替this.users= users.data.data;

methods: {
loadUsers() {
axios.get('api/user')
.then((response) => {
this.users= response.data.data;
})
.catch(function (error) {
console.log(error);
})
}
}
}

Answer 2

删除

<script src="{{mix('js/app.js')}}"></script>

在

下面

<div id="app">.

从我的刀片页。现在都工作了!