1. 모달 적용
https://getbootstrap.com/docs/4.4/components/modal/
2. Modal 설정
<!-- Create Modal -->
<div
class="modal fade"
id="create-modal"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Create Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1>MODAL WORKS</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
3. 3번째줄 버튼에 이벤트메서드를 호출등록한다.
<button @click="createModal" class="btn btn-primary btn-block">Add New Task</button>
4. methods에 createModal()메서드를 정의한다. 클릭시 모달창이 오픈되게 한다.
methods: {
createModal(){
$("#create-modal").modal("show")
},
loadTasks() {
axios.get(this.uri).then(response => {
this.tasks = response.data.tasks;
});
}
},
5. methods에 createTask()메서드를 정의한다.
//데이터 삽입하기
createTask(){
console.log(this.task.name);
},
6. 버튼에 메서드 호출을 등록한다.
<button @click="createTask" type="button" class="btn btn-primary">Understood</button>
7. Modal Body에 글등록 양식을 만들어준다.
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input v-model="task.name" type="text" id="name" class="form-control">
</div>
<div class="form-group">
<label for="description">Description</label>
<input v-model="task.body" type="text" id="description" class="form-control">
</div>
</div>
8. 브라우저에서 글제목을 작성하고 요청을 보내본다.
9. 데이터삽입하는 소스작성
//데이터 삽입하기
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=>{
console.log(error);
})
},
글이 작성되는지 확인해보자
