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

+ Recent posts