9. update

1. TaskComponent.vue

create modal을 복사 후 붙여넣기 한 다음 수정해서 사용한다.

2. methods:{} 에 업데이트 모달창이벤트메서드를 만들어준다.

//업데이트 모달창 오픈

loadUpdateModal(){

},

3. Edit 버튼에 이벤트메서드호출을 등록한다.

<button @click="loadUpdateModal" class="btn btn-info">Edit</button>

4. new_update_task[] 배열을 만들어준다.

export default {

data() {

return {

task: {

name: "",

body: ""

},

tasks: [],

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

errors: [],

new_update_task:[]

};

},

5. 에러배열을 삽입하고, 모달창 오픈, 해당버튼의 인덱스를 가져온다.

//업데이트 모달창 오픈

loadUpdateModal(index){

this.errors = [];

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

this.new_update_task = this.tasks[index];

},

6. v-model을 수정해준다.

<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>

7. updateTask 메서드를 작성한다.

테스트 코드

updateTask(){

console.log(this.new_update_task.name);

},

8. 브라우저에서 확인

9. 최종 업데이트 로직

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");

})

.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]);

}

});

},

10. 브라우저 실행