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. 브라우저에서 확인해보자
'라라벨 > laravel vue crud' 카테고리의 다른 글
10. Delete (0) | 2020.02.28 |
---|---|
9. update (0) | 2020.02.28 |
7. Database Modal Create (0) | 2020.02.27 |
6. Databases Data 불러오기 (0) | 2020.02.27 |
5. TaskComponent 템플릿변경 (0) | 2020.02.27 |