Ситуация
У меня есть компонент vue, который содержит дочерний компонент, который должен показывать модальное значение. Когда я переключаю isShowModal bool (с помощью кнопки или Vue devtools), отображается модальный режим. Когда я нажимаю кнопку закрытия в модальном режиме (или переключаю isShowModal в devtools), модальное окно закрывается. Так что это работает как ожидалось до сих пор.
Когда я пытаюсь снова открыть модал, нажав на кнопку, чтобы открыть модал, он не работает. Я заметил, что modal-backdrop все еще «существует» (как невидимое наложение). Я не понимаю, почему это происходит, поскольку modal-component не подключен.
Когда я закрываю модал через консоль devtools с помощью команды $("#"+ idHere).modal("hide");, модал, включая задний план, скрывается.
Примечание. У меня есть несколько причин, по которым я хочу смонтировать / размонтировать компонент, чтобы показать / закрыть модальный режим. По этой причине это не вариант, чтобы запустить вызовы $("#" + "idHere").modal("show/hide");. Я пытался сделать то же самое с событиями, только для целей тестирования, а не для модального вкл. фон был спрятан отлично.
Код, представленный ниже, не является реальным кодом, поскольку он содержит больше лог c, чем требуется для этого вопроса. Пример кода очень хорошо подходит для моего кода, когда он включает функциональность переключения родитель / модель. Шаблон модального компонента почти полностью скопирован из моего кода.
Вопросы
- Как мне закрыть / удалить / отключить (какой бы ни был правильный термин ) фон, когда я размонтирую свой модальный компонент.
- Подход, который я использую для монтирования / размонтирования компонентов, - путь к go?
- Рекомендуется ли переключать модалы, как я это делаю в Vue?
Пример кода
Пример родительского компонента:
<template>
<div>
<modal-component
title = "Zone"
v-if = "isShowModal"
:closeCallback = "() => { isShowModal = false }" />
// Some button that toggles the isShowModal bool
</div>
</template>
<script>
export default {
mounted() {
},
data() {
return {
isShowModal: false,
}
},
showZoneNewModal: function(zone) {
this.isShowModal = true;
},
}
</script>
Пример модального компонента:
<template>
<div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" v-on:click="closeCallback()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">{{ title }}</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
// some header content
</div>
</div>
<div class="modal-footer">
// some body content
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
closeCallback: { type: Function, required: true },
}
mounted() {
$("#" + this._uid).modal('show');
},
beforeDestroy() {
$("#" + this._uid).modal("hide");
},
}
</script>
UPDATE
Эта строка "порождает" фон div. Когда я удаляю весь другой код из шаблона модального компонента, проблема все еще существует.
<template>
<div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static">
</div>
</template>
ОБНОВЛЕНИЕ 2
Я заметил, что по какой-то причине 2 дива появляются при установке modal-component. no 1 выглядит так в dev-tools:
<div id="9" data-backdrop="static" class="modal fade in box-info show" style="display: block; padding-right: 17px;" aria-modal="true"></div>
no 2 выглядит так в dev-tools. Это также тот, который остается "активным / живым". Я не могу найти div с классом modal-backdrop в одном из моих 2 компонентов. (также ничего не могу найти с помощью grep).
<div class="modal-backdrop fade show"></div>