14. 전체소스

<template>

<div>

<div v-if="!loading">

<img class="rounded mx-auto d-block" :src="image" alt="loder">

</div>

<div v-else>

<button @click="loadCreateModal" 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 @click="loadUpdateModal(index)" class="btn btn-info">Edit</button>

</td>

<td>

<button @click="deleteTask(index)" class="btn btn-danger">Delete</button>

</td>

</tr>

</tbody>

</table>

<!-- Create Modal -->

<div

class="modal fade"

id="create-modal"

data-backdrop="static"

abindex="-1"

role="dialog"

aria-labelledby="staticBackdropLabel"

aria-hidden="true"

>

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="staticBackdropLabel">Create Modal</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<div class="alert alert-danger" v-if="errors.length > 0">

<ul>

<li v-for="error in errors">{{error}}</li>

</ul>

</div>

<div class="form-group">

<label for="name">Name</label>

<input v-model="task.name" type="text" id="name" class="form-control" />

</div>

<div class="form-group">

<label for="description">Description</label>

<input v-model="task.body" type="text" id="description" class="form-control" />

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button @click="createTask" type="button" class="btn btn-primary">Understood</button>

</div>

</div>

</div>

</div>

<!-- Update Modal -->

<div

class="modal fade"

id="update-modal"

data-backdrop="static"

abindex="-1"

role="dialog"

aria-labelledby="staticBackdropLabel"

aria-hidden="true"

>

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="staticBackdropLabel">Update Modal</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<div class="alert alert-danger" v-if="errors.length > 0">

<ul>

<li v-for="error in errors">{{error}}</li>

</ul>

</div>

<div class="form-group">

<label for="name">Name</label>

<input v-model="new_update_task.name" type="text" id="name" class="form-control" />

</div>

<div class="form-group">

<label for="description">Description</label>

<input

v-model="new_update_task.body"

type="text"

id="description"

class="form-control"

/>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button @click="updateTask" type="button" class="btn btn-primary">Understood</button>

</div>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

export default {

data() {

return {

task: {

name: "",

body: ""

},

tasks: [],

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

errors: [],

new_update_task: [],

image: 'images/loader3.gif',

loading: false,

toastr: toastr.options = {"positionClass" : "toast-top-full-width"}

};

},

methods: {

//글작성 모달창 오픈

loadCreateModal() {

$("#create-modal").modal("show");

},

//업데이트 모달창 오픈

loadUpdateModal(index) {

this.errors = [];

$("#update-modal").modal("show");

this.new_update_task = this.tasks[index];

},

//데이터 삽입하기

createTask() {

axios

.post(this.uri, { name: this.task.name, body: this.task.body })

.then(response => {

this.tasks.push(response.data.task);

this.resetData();

toastr.success(response.data.message);

$("#create-modal").modal("hide");

})

.catch(error => {

//에러처리

this.errors = [];

if (error.response.data.errors.name) {

this.errors.push(error.response.data.errors.name[0]);

}

if (error.response.data.errors.body) {

this.errors.push(error.response.data.errors.body[0]);

}

});

},

//데이터 업데이트하기

updateTask() {

axios

.patch(this.uri + this.new_update_task.id, {

name: this.new_update_task.name,

body: this.new_update_task.body

})

.then(response => {

//실행후 모달 닫는 로직

$("#update-modal").modal("hide");

toastr.success(response.data.message);

})

.catch(error => {

//에러처리

this.errors = [];

if (error.response.data.errors.name) {

this.errors.push(error.response.data.errors.name[0]);

}

if (error.response.data.errors.body) {

this.errors.push(error.response.data.errors.body[0]);

}

});

},

//데이터 삭제하기

deleteTask(index){

let confirmBox = confirm("정말로 삭제 하시겠습니까?");

if(confirmBox == true){

axios.delete(this.uri + this.tasks[index].id)

.then(response=>{

this.$delete(this.tasks, index);

toastr.success(response.data.message);

}).catch(error=>{

console.log("Could not delete for some reason");

})

}

},

//데이터 불러오기

loadTasks() {

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

this.tasks = response.data.tasks;

this.loading = true;

});

},

//리셋데이터 호출

resetData(){

this.task.name = '',

this.task.body = ''

}

},

mounted() {

this.loadTasks();

}

};

</script>