Question

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

这是我的代码：

TaskController

 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>

尽管控制器正确返回了json数据，但我没有出现任何错误，但没有任何结果出现在我的视口中

Answer 1

created（）钩子不应放在方法中：

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

从Laravel Api到Vue页面获取数据

1 个答案: