[vue.js] v-bind를 사용하여 모달창 띄우기

[문제] jQuery 없이 모달창 띄우기

[해결] v-bind를 사용하여 모달창 띄움

 

기본 구조

<div id = "main">
	<!-- main content -->
    <button type="button" @click ="open()">모달창 열기</button>
</div>

<div id = "modal" class="modal fade">
	<div>
		<!-- modal content -->
    </div>
    <script>
    	const modal =
        	new Vue({
            	el : '#modal',
                data : {
                	openModal : false
				}
                
            });
    </script>
</div>
<script>
   new Vue({
        el : '#main',
        data : {  },
        method : {
        	open : function() {
            
            }
        }
    });
</script>

 

1. 버튼 클릭시 모달의 openModal 값을 변경시켜준다.

2. 모달의 openModal의 값을 조건으로 하여 v-bind와 삼항연산자를 함께 사용하여 class, style값을 변경할 수 있도록 한다.

<div id = "main">
	<!-- main content -->
    <button type="button" @click ="open()">모달창 열기</button>
</div>

<div id = "modal" class="modal fade" v-bind:class="openModal ? 'show' : '' " v-bind:style = "openModal ? 'display : block' : 'display : none'">
	<div>
		<!-- modal content -->
    </div>
    <script>
    	const modal =
        	new Vue({
            	el : '#modal',
                data : {
                	openModal : false
				}
                
            });
    </script>
</div>
<script>
   new Vue({
        el : '#main',
        data : {  },
        method : {
        	open : function() {
            	modal.openModal = !modal.openModal;
            }
        }
    });
</script>

 

3. 모달창 닫을 때는 같은 방법으로, 모달 내의 메소드에서 openModal의 값을 바꿔주는 modal.openModal = !modal.openModal; 을 다시 적어 사용하면 된다.