6. Databases Data 불러오기

1. TaskComponent.vue

<template>

<div>

<button class="btn btn-primary btn-block">Add New Task</button>

<table class="table" v-if="tasks">

<thead>

<tr>

<th>id</th>

<th>Name</th>

<th>Body</th>

</tr>

</thead>

<tbody>

<tr v-for="(task, index) in tasks">

<td>{{index + 1}}</td>

<td>{{task.name}}</td>

<td>{{task.body}}</td>

<td>

<button class="btn btn-info">Edit</button>

</td>

<td>

<button class="btn btn-danger">Delete</button>

</td>

</tr>

</tbody>

</table>

</div>

</template>

<script>

export default {

data() {

return {

task: {

name: "",

body: ""

},

tasks: [],

uri: "http://laravelvuecrud.test/tasks/"

};

},

methods: {

loadTasks() {

axios.get(this.uri).then(response => {

this.tasks = response.data.tasks;

});

}

},

mounted() {

this.loadTasks();

}

};

</script>