Блог

Я новичок в 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>
  

Я не получил ошибок, но в моем vue не появилось результата, хотя контроллер правильно возвращает данные json

созданный () хук не должен быть в методах:

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