Как скрыть загрузчик модального и размытого фона, если поле действительно? - PullRequest
Новая
       16

Как скрыть загрузчик модального и размытого фона, если поле действительно?

0 голосов
/ 01 мая 2019

Я использую v-show, чтобы скрыть модал, но единственная проблема - размытый фон модала, который все еще там. Это запас, я не могу нажать любую кнопку из-за размытого фона модального. Как я могу закрыть или скрыть модал с размытым фоном? Может ли кто-нибудь помочь мне с моей проблемой? Это мой jsfiddle jsfiddle.net / 4pq0yedv 

var app = new Vue({
    el: '#vue-app',
    data: {
        showModal: true
    },
methods: {
    validationCategory : function(e) {
        if (!this.category_description) {
            vm.checkForm();
            return;
        } else {
            vm.addCategory();
            vm.clearData();
            this.showModal = false;
        }
    }
}

<form id="vue-app" @submit="validationCategory()" v-show="showModal">
        <div class="modal" id="myModal"> <!-- start add modal -->
            <div class="modal-dialog">
                <div class="modal-content " style="height:auto">

                    <!-- Modal Header -->
                    <div class="modal-header">
                      <h4 class="modal-title"> Add Category </h4>
                      <button @click="clearData" type="button" class="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="col-lg-12">
                                <input type="text" class="form-control" id="category_description" name="category_description" v-model="category_description" placeholder="Enter Description">
                                <div v-if="errors.length">
                                    <div v-for="error in errors" class="text-danger"> {{ error }} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                     <button type="button" @click="category_description != undefined ? validationCategory() : ''" class="btn btn-primary"> Add Category </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
...