7. Database Modal Create

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">&times;</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);

})

},

글이 작성되는지 확인해보자