从LaravelApi获取数据到Vue页面

Question

我是 vue.js 的初学者，我正在尝试获得 api 结果并将其显示到我的 vue 页面。我的 Api 是用 Laravel 5.7 构建的。我刚刚安装了 Vue axios 包以使用 http.

这是我的代码：

任务控制器

 public function index()
 {
    return response(Task::all()->jsonSerialize(), Response::HTTP_OK);
 }

App.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>

虽然控制器 returns json 数据正确

，但我没有收到任何错误，但我的 vue 没有显示任何结果

Answer 1

created() 挂钩不应在方法中：

export default {
   methods: {},
   created() {}
}

从LaravelApi获取数据到Vue页面

Getting data from Laravel Api to Vue Page

axios

vuejs2

laravel-5.7