Vue 从按钮关闭模态

Question

我正在使用bootstrap-vue作为模态。当我单击按钮OPEN MODAL时，它会打开包含页脚按钮的模式，作为OK和CANCEL。这些按钮关闭模态，因为它的预定义代码来自 bootstrap-vue。

我试图在名为CLOSE MODAL USING THIS BUTTON的模态中添加按钮，这应该关闭模态，但它没有。有没有办法让CLOSE MODAL USING THIS BUTTON从模态中关闭？

视图

<div id="app">
<b-button v-b-modal.modal-scrollable variant="info" v-on:click="opensModal">Open Modal</b-button>
<b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
<p class="my-4">
"Contains modal detail"
</p>
<b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>
<br>
</b-modal>
</div>

脚本

new Vue({
el: "#app",
data: {
clickOnButton: true,
displayModal: true
},
methods: {
opensModal(){
this.clickOnButton = false; <!-- it opens the modal -->
},
closeModal(){
this.displayModal = false; <!-- it does not close -->
}
}
})

下面是上面的代码链接JSFIDDLE

https://jsfiddle.net/ujjumaki/z1ndL65r/18/

Answer 1

您可以使用 bootstrap-vue 提供的内置this.$bvModal.hide(id)。

所以而不是...

<b-button variant="info" data-dismiss="modal-scrollable" v-on:click="closeModal">CLOSE USING THIS BUTTON</b-button>

请改为执行此操作...

<b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>

这样，您就不需要额外的close modal方法。

编辑

实际上，您不需要整个method块。 您也可以取出数据项。

您的代码应该可以正常工作...

<div id="app">
<b-button v-b-modal.modal-scrollable variant="info" >Open this Modal</b-button>
<b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-show="!displayModal">
<p class="my-4">
"Contains modal detail"
</p>
<b-button variant="info" @click="$bvModal.hide('modal-scrollable')">CLOSE USING THIS BUTTON</b-button>
<br>
</b-modal>
</div>

脚本。。。

new Vue({
el: "#app"
})

这不是干净多了吗？;D

Answer 2

Insted 我使用了另一种解决方案，即 b 模态的v-model属性来显示和隐藏模态。

<div id="app">
<b-button @click="openModal()" variant="info" >Open this Modal</b-button>
<b-modal id="modal-scrollable" scrollable title="Waiver Legal" v-modal="popUp">
<p class="my-4">
"Contains modal detail"
</p>
<b-button variant="info" @click="closeModal()">CLOSE USING THIS BUTTON</b-button>
<br>
</b-modal>
</div>

。和内部脚本创建方法

openModal(){
this.popUp = true;
}
closeModal(){
this.popUp = false;
}

Answer 3

在这里，我用普通的javascript给出了一个解决方案。我用了 Vue js，我不想把 jQuery 和 Vue 一起使用。

document.querySelector('#modalid').classList.remove('show');
document.querySelector('body').classList.remove('modal-open');
const mdbackdrop = document.querySelector('.modal-backdrop');
if (mdbackdrop){
mdbackdrop.classList.remove('modal-backdrop', 'show');
}