如果字段有效,如何隐藏引导模态和模糊背景?

时间:2019-05-01 03:35:55

标签: vue.js bootstrap-modal

我使用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>

0 个答案:

没有答案
相关问题