라라벨/laravel vue crud
6. Databases Data 불러오기
땀모
2020. 2. 27. 19:20
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>
