[Vue] CDN 방식으로 사용 시 v-if에 대한 이슈

 

회사 프로젝트를 CDN 방식으로 하여 Vue를 사용하였는데,

CDN으로 사용 시 v-if에 대한 이슈가 있었다.

페이지 처음 접속시 로딩?때문에 v-if가 제대로 동작하지 않아서 팝업이 잠깐 노출됐다가 사라지는 것이다.

 

해결방법

css로 modal에 display: none 상태를 default로 만들어 준 뒤 madal에 class를 bind해주었다.

근데 이렇게 했더니 transition이 안먹어서 v-bind와 v-if를 함께 사용하여서 해결해주었다!

 

css

.modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .2);
        z-index: 99999;
        &.on {
            display: flex;
        }
        p {
            font-size: 24px;
            text-align: center;
            line-height: 1.6;
            margin-bottom: 30px;
        }
        .modal-box {
            @include flex(flex, center, center);
            width: 400px;
            height: 300px;
            border-radius: 20px;
            background-color: #fff;
        }
 }

 

html

<transition name="modal" appear>
    <div
        class="modal confirm"
        :class="{'on' : isConfirm}"
        v-if="isConfirm">
        <div class="modal-box">
            <div class="wrap">
                <p>받으시는 분 연락처가 <strong>@{{receiverPhone}}</strong>번이 맞습니까?</p>
                <div class="btn-wrap">
                    <button
                        type="button"
                        class="btn-gray btn-xsmall"
                        @click="isConfirm = false"
                    >아니오
                    </button>
                    <button
                        type="button"
                        class="btn-blue btn-xsmall"
                        @click="confirm"
                    >예
                    </button>
                </div>
            </div>
        </div>
    </div>
</transition>