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