-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
모달 창이 사라지지 않고 처음부터 계속 띄어져있어요
23.01.05 14:22 작성 조회수 287
1
<template>
<div class="inputBox shadow">
<input type="text" v-model="newTodoItem" placeholder="Type what you have to do"
v-on:keyup.enter="addTodo">
<span class="addContainer" v-on:click="addTodo">
<i class="addBtn fa fa-plus" aria-hidden="true"></i>
</span>
<Modal> v-if="showModal" @close="showModal = false">
<h3 slot="header">
경고!
</h3>
</Modal>
</div>
</template>
<script>
import Modal from './common/Modal.vue'
export default{
data: function(){
return {
newTodoItem:'',
showModal: false
}
},
methods: {
addTodo: function(){
if(this.newTodoItem !== ''){
this.$emit('addTodoItem', this.newTodoItem);
this.clearInput();
}else{
this.showModal = !this.showModal;
}
},
clearInput(){
this.newTodoItem = '';
}
},
components:{
Modal: Modal
}
}
</script>
위에는 TodoInput.vue 부분입니다.
<template>
<Transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">default header</slot>
</div>
<div class="modal-body">
<slot name="body">default body</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button
class="modal-default-button"
@click="$emit('close')"
>OK</button>
</slot>
</div>
</div>
</div>
</div>
</Transition>
</template>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter-from {
opacity: 0;
}
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
위에는 Modal.vue 부분입니다.
위는 프로젝트 구조입니다.
모달창이 저렇게 계속 띄어져있습니다. 그냥 실행하자마자 띄어져있고 OK를 눌러도 닫혀지지가 않습니다. 왜 그런지 혹시 알 수 있을까요?
답변을 작성해보세요.
2
답변 1