vuejs2 - 从 Laravel Api 获取数据到 Vue Page
问题描述
我是 vue.js 的初学者,我正在尝试获取 api 结果并将其显示到我的 vue 页面。我的 Api 是用 Laravel 5.7 构建的。我刚刚安装了 Vue axios 包来使用 http。
这是我的代码:
任务控制器
public function index()
{
return response(Task::all()->jsonSerialize(), Response::HTTP_OK);
}
应用程序.vue
<template>
<div class="app-component">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Task Title</th>
<th>Priority</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<task-component v-for="task in tasks" :key="task.id" :task="task"></task-component>
<tr>
<td><input type="text" id="task" class="form-control"></td>
<td>
<select id="select" class="form-control">
<option>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</td>
<td><button class="btn btn-primary">Add</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import TaskComponent from './Task.vue';
export default{
data(){
return{
tasks: [],
}
},
methods: {
getTasks(){
window.axios.get('/api/tasks').then(({data})=>{
data.forEach(task =>{
this.tasks.push(task)
});
});
},
created(){
this.getTasks();
}
},
components:{TaskComponent}
}
</script>
任务页面
<template>
<tr>
<td>{{ task.id }}</td>
<td>{{ task.title }}</td>
<td>{{ task.priority }}</td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
</template>
<script>
export default{
data(){
return{
}
},
props: ['task']
}
</script>
尽管控制器正确返回 json 数据,但我没有收到任何错误,但我的 vue 没有出现任何结果
解决方案
created() 钩子不应该在方法中:
export default {
methods: {},
created() {}
}
推荐阅读
- java - 如何在spring mvc中统计行SQL的记录并在主页显示数量
- google-kubernetes-engine - consul 在 asia-south1(孟买)地区的谷歌 Kubernetes 引擎上部署时不断崩溃,但在其他地区工作
- javascript - 在页面加载而不是链接时启动
- javascript - 无法使用 jQuery click() 打开链接
- html - 每个人都需要等量的 s 吗?
- python - 如何在python 3中通过小写,大写和混合大小写字符串从控制台拆分列表
- javascript - Angular:Flex 在移动设备上运行不佳(IOS 13)
- laravel - 有没有办法用 Laravel Query Builder 重写这个原始 SQL 查询
- apache-storm - 如何查看正在运行的 Storm 拓扑的当前输出?
- python - ModuleNotFoundError:没有命名的模块
点安装后