Actualmente estoy empleando el siguiente código:
<div class="card">
<div class="card-body">
<div class="wizard-tab mb-4">
<ul class="nav nav-tabs d-block d-sm-flex">
<li class="nav-item mr-auto mb-4">
<a class="nav-link p-0 active" data-toggle="tab" href="#tab1">
<div class="d-flex">
<div class="mr-3 mb-0 h1">1</div>
</div>
</a>
</li>
<li class="nav-item mr-auto mb-4">
<a class="nav-link p-0" data-toggle="tab" href="#tab2">
<div class="d-flex">
<div class="mr-3 mb-0 h1">2</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active show" id="tab1">
<div class="form">
<p>Hola</p>
<button type="button" class="btn float-right btn-primary nexttab">Next</button>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div>
<p>Hola</p>
<div class="d-flex">
<button type="button" class="btn btn-primary prevtab">Previous</button>
<button type="button" class="btn btn-primary nexttab ml-auto">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
El problema es que si lo coloco dentro de un modal, no funcionan los prev y next tabs al cliquear los correspondientes botones, sin embargo, si los ubico fuera del modal funcionan perfectamente. Adjunto el modal:
<div class="modal" v-if="modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<!-- MODAL HEADER -->
<!-- MODAL BODY -->
<div class="modal-body">
<!--AQUI ESTOY INCRUSTANDO EL CARD ANTERIOR DE LOS NAVS -->
</div>
</div>
</div>
</div>
CSS del modal:
.modal{
padding-right: 14px;
display: list-item;
overflow: auto;
opacity: 1;
background: rgba(4, 5, 10, 0.8);
}
Así que mi pregunta es cómo lograr solucionar y hacer que funcionen los botones dentro del dialog.