modal con vueJS show, but i can´t do anything

Question

I am creating a modal window with vueJS, which I have already created in a previous component ...

The modal, is created perfectly, when I click the button, it is displayed, but it stays below the fade and I can't click on it or do anything ... I don't know that the truth is failing.

I attach code of my vue component

    <template>
    <div class="">
        <div class="d-flex">
            <div class="justify-content-center offset-md-3">
                <label for="codigoAsistencia">Código de asistencia.</label>
                <input type="text" v-on:keyup="codigoAsistencia" id="codigoAsistencia" placeholder="Código" class="form-control" >
                <label for="cliente">Cliente.</label>
                <input type="text" v-on:keyup="buscarUsuario" id="nombreCliente" placeholder="Cliente" class="form-control" >
                <label for="estado">Estado.</label>

                <select @change="buscarEstado($event)" class="form-control">
                    <option value="en_proceso">En proceso</option>
                    <option value="finalizada">Finalizada</option>
                </select>

            </div>
            <div class="justify-content-center offset-md-3">
                <label for="fechaInicio">Fecha de inicio.</label>
                <input type="date" id="fechaInicio" placeholder="Fecha Inicio" class="form-control">
                <label for="fechaFin">Fecha fin.</label>
                <input type="date" v-on:change="buscarFecha" id="fechaFin" placeholder="Fecha Fin" class="form-control">
            </div>

        </div>

        <div class="d-flex tabla-resultado offset-md-3 mt-3">

            <div class="table-responsive">
                <table class="table" id="tablaAsistencias">
                    <thead class="thead-dark">
                        <tr>
                            <th>Código</th>
                            <th>Fecha</th>
                            <th>Usuario</th>
                            <th>Estado</th>
                            <th>Tiempo empleado actuación</th>
                            <th>Actuaciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="data in datosAsistencia" :key="data.codAsistencia">

                            <td>{{data.codAsistencia}}</td>
                            <td>{{data.fecha}}</td>
                            <td>{{data.nombre}}</td>
                            
                            <td>
                                <select @change="cambiarEstado(data.codAsistencia, $event)">
                                    <option value="0" selected>{{data.estado}}</option>
                                    <option value="en_proceso">En proceso</option>
                                    <option value="finalizada">Finalizada</option>
                                </select>
                            </td>

                            <td>{{data.tiempoEmpleado}}</td>
                            <td><a href="#" class="btn btn-info" data-toggle="modal" data-target="#ver" @click="visualizarActuaciones(data.codAsistencia)">Actuaciones</a></td>
                        </tr>
                    </tbody>
                   
                </table>
            </div>
        </div>


        <!-- modal para visualizar las actuaciones -->

        <div class="modal fade" id="ver">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span>×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- mostramos las actuaciones -->
                            <table class="table table-hover table-striped tabla-actuaciones">
                                <th>Fecha</th>
                                <th>Tiempo Empleado</th>
                                <th>Bono</th>
                                <th>Tiempo Contratado </th>
                                <th>Tiempo Restante</th>
                                <tbody>
                                    <tr v-for="data in datosActuaciones" :key="data.codActuacion">
                                        <td>{{ data.fecha }}</td>
                                        <td>{{ data.tiempoEmpleado }}</td>
                                        <td>{{ data.bono }}</td>
                                        <td class="tipoBono"></td>
                                        <td>{{ data.tiempoRestanteBono }}</td>
                                        <td><input type="hidden" id="asistencia" v-model="data.codAsistencia"></td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" @click="iniciarActuacionConActuaciones">Iniciar Actuacion</button>
                                <button type="button" class="btn btn-primary" @click="detenerActuacionConActuaciones">Detener Actuacion</button>
                            </div>

                            <span id="minutosActuaciones">0</span>:<span id="segundosActuaciones">0</span>
                        </div>
                    </div>
                </div>
        </div>



    </div>



    
</template>
    <script>
    
        export default {
            data() {
                return {
                    datosAsistencia: [],
                };
    
            },
    
            methods: {
                
                visualizarActuaciones: function(codAsistencia){             
    
                    let url = "/getActuaciones";
                    axios
                        .post(url, { codAsistencia: codAsistencia } )
                        .then((response) => {
                            this.datosActuaciones = response.data;
                        })
                        .catch((error) => console.log(error));
                },
    
                
        };
    </script>

I attach a picture of my problem

Answer 1

问题是 z-index 我改变了这个