8. 유효성 검사

1. uri 아래에 에러배열을 만들어준다.

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

errors: []

2. catch 부분을 작성해준다.

//데이터 삽입하기

createTask(){

axios.post(this.uri, {name: this.task.name, body: this.task.body }).then(response=>{

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

$("#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]);

}

});

},

3. 모달 body아래에 에러메시지 부분을 만들어준다.

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

4. 브라우저에서 확인해보자