Question

我有一个模态，该模态正在作为组件导入并添加到页面中。模态称为

进入页面

 <TwoFactorStatus v-show="showTwoFactoreModal"></TwoFactorStatus>

然后按钮具有点击事件，例如

 <button class="btn btn-danger pull-right" @click="ShowTwoFactoreModal()" type="danger">Disable two-factor authentication</button>

然后调用

的方法

ShowTwoFactoreModal() {
      this.showTwoFactoreModal = true;
    }

模态如下

<template>
<div class="modal fade" id="showTwoFactoreModal" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                Two Factor Switch Off
            </div>
            <div class="modal-body">
            <p>This modal must pass</p>
            </div>
        </div>
    </div>
</div>
</template>

Answer 1

将您的ShowTwoFactoreModal函数更改为以下内容：

ShowTwoFactoreModal() {
    this.showTwoFactoreModal = true;
    $('#showTwoFactoreModal').modal('show');
}

可以或者使用：class绑定并附加活动类，但这更加直接。我通常使用eventBus来执行此操作，但是对于您的项目来说可能有点过分……如果您要使用事件总线来执行操作，则可以将eventListener附加到模式组件，然后将showModal函数回调附加到该监听器，您不需要设置ID，您可以像这样$(this.$el).modal('show');来调用它……但这就是另一个故事……

Answer 2

Bootstrap modal使用其自己的js函数来处理show和hide modal。 Vue v-show只能显示和隐藏您对其逻辑进行编程的组件。但是引导程序模态通过将类附加到模态组件来显示和隐藏。
如果要在不使用bootstrap.js的情况下进行切换，则可以将jQuery与Vue结合使用，如下所示。（如果只想显示，则更改方法.show（））

//200 is duration of fade animation.
<button @click="toggleModal"></button>

function toggleModal() {
    $('#your_modal_id').fadeToggle(200)
}

如果您想在其js中使用引导程序自身的模式，则可以复制并粘贴模式代码这里。 https://getbootstrap.com/docs/4.0/components/modal/

如果您希望Vue v-show处理所有流程，请编写逻辑来执行。如果需要帮助，请询问。

Modal ls不使用V-Show触发

2 个答案: