라라벨/laravel vue crud
8. 유효성 검사
땀모
2020. 2. 27. 20:24
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. 브라우저에서 확인해보자
