Модал не стреляет с V-Show

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

Модальный Bootstrap использует свои собственные функции js для обработки модального показа и скрытия.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 обрабатывал весь процесс, напишите для этого логику.Если нужна помощь, просто спросите.

Answer 2

Измените вашу ShowTwoFactoreModal функцию на что-то вроде этого:

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

Либо то, либо, возможно, используя: привязки классов и добавление активного класса, но это более просто.Я обычно делаю это с помощью eventBus, но это может быть излишним для вашего проекта ... если бы вы делали это с шиной событий, вы могли бы присоединить eventListener к модальному компоненту и прикрепить обратный вызов функции showModal к этому слушателю, гдевам не нужно устанавливать идентификаторы, вы можете просто назвать это как: $(this.$el).modal('show'); ... но это уже другая история ...