Modal ls не срабатывает с V-Show
У меня есть модальное окно, которое импортируется и добавляется на страницу в качестве компонента. Модальное окно вызывается на странице как
<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>
Да, используя бутстрап
попробуйте переключить затухание класса, а не использовать v-show
Ответы 2
Измените функцию ShowTwoFactoreModal на что-то вроде этого:
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
$('#showTwoFactoreModal').modal('show');
}
Либо так, либо, возможно, используя привязки: class и добавив активный класс, но это более прямолинейно. Обычно я делаю это с помощью eventBus, но это может быть излишним для вашего проекта ... если бы вы делали это с помощью шины событий, вы могли бы прикрепить eventListener к модальному компоненту и прикрепить обратный вызов функции showModal к этому слушателю, где вам не нужно устанавливать идентификаторы, вы можете просто назвать это как: $(this.$el).modal('show'); ... но это уже другая история ...
Странно то, что я делал модальные окна в других местах на сайте точно так же, как и выше, и никогда не нуждался в этом бите $ ('# showTwoFactoreModal'). Modal ('show'); Но работает отлично! Спасибо
Возможно, я ошибаюсь, но это, вероятно, проблема с CSS-классами, у вас, вероятно, есть необходимые классы в других модальных окнах и теле, и вы просто скрываете их с помощью v-show, проверьте это, сделайте это и другие модальные окна покажут без v-show, если другие модальные окна показывают, что это, вероятно, так
Я посмотрю и посмотрю, в чем разница, но спасибо, теперь он работает отлично!
Модальное окно 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 обрабатывал весь процесс, напишите логику для этого. Если нужна помощь, просто спросите.
вы используете bootstrap я предполагаю?