Tengo varios botones dentro de mi código que llaman a showModal(title) .
showModal(title) { this.modalTitle = title this.$bvModal.show("add-modal") }El modal objetivo se muestra a continuación.
<b-modal id="add-modal" ref="modal" v-bind:title="'Add Item to ' + modalTitle + ' list'" ... Lo quiero para que solo se requiera una etiqueta <b-modal> dentro del componente Vue, pero se puede abrir con varios botones diferentes. En la carga de la primera página, cada modal (con los diferentes títulos) se abre según lo previsto. Sin embargo, cuando cambio el código y el navegador se vuelve a cargar, voy a abrir otro modal y los modales antiguos se abren encima del previsto.
¿Hay alguna manera de asegurarme de que los modales no se abran uno encima del otro y que solo se abra un modal después de que se vuelva a cargar el navegador?
Gracias
Le sugiero enfáticamente que use JavaScript si está tratando con múltiples modales en su página.
Ejemplo: (Jquery) estoy usando Bootstrap 4
<script type="text/javascript"> $(document).ready(function () { //when triggering using buttons $("#button1").click(function(){ $('#modal2').modal('hide'); }); $("#button2").click(function(){ $('#modal1').modal('hide'); }); //on page load, and you want your modal1 to be launch $("#modal1").modal('show'); }); </script>