javascript - 如何将数据从 laravel 控制器发送到 vuejs
问题描述
如何将数据从 Laravel Controller 发送到 vue?我已经设置了我认为它可能工作的方式,但没有发送数据。我做错了什么?控制器(设置在单独的 API 文件夹中):
public function index()
{
return User::all();
}
来自 api.php 的路由:
Route::apiResources([
'user' => 'API\UsersController'
]);
组件代码:
<template>
<div>
<v-toolbar flat color="white">
<v-toolbar-title>Users</v-toolbar-title>
</v-toolbar>
<ol v-for="user in users">
<li>Name: {{ user.name }}</li>
</ol>
<v-data-table
:headers="headers"
:items="users"
:items-per-page="5"
class="elevation-1"
flat
>
</v-data-table>
</div>
</template>
<script>
import {AxiosInstance as axios} from "axios";
export default {
data () {
return {
headers: [
{
text: 'Username',
align: 'left',
value: 'username',
},
{ text: 'Name', value: 'name' },
{ text: 'Surname', value: 'surname' },
{ text: 'Email', value: 'email' },
],
users: [],
}
},
methods: {
loadUsers(){
axios.get('./api/user').then(response => this.users = response.data);
}
},
mounted() {
this.loadUsers();
}
}
</script>
我只是在上面放了一个简单的列表来测试数组,但它只是空白。
解决方案
替换这个
axios.get('./api/user').then(response => this.users = response.data);
有了这个
axios.get("api/user").then(({data}) => (this.users = data));
推荐阅读
- google-apps-script - 在 Google Sheet/Google App Script 中,当我编辑一个单元格时,我想在另一个单元格上调用函数,但不工作
- mysql - mysql insert into 不工作,但 select 不工作
- r - ggplot 到 ggplotly 不适用于自定义 geom_boxplot 宽度
- amazon-s3 - Presto 无法从 S3 导入 PARQUET 文件
- c++ - C++:如何从 make_shared 部分推断模板参数
- c++ - 如何使用 Windows 媒体 API(如 Media Foundation 或 DirectShow)检测相机帧丢失?
- sql-server - 存储过程导致 100% CPU 使用率
- magento - 我的自定义主题 default.XML 在顶部标题上缺少登录
- python - 如何将项目 <1 归为 0
- amazon-web-services - 是否有更有效的方法来查找 AWS 中由特定角色执行的所有 cloudtrail 事件?