0

Resulta que genero una tabla que me imprime los datos de unos viajes, en el ultimo td de cada fila pongó un boton que me generara un PDF de los datos del viaje al darle click en él

introducir la descripción de la imagen aquí

La tabla la genero con este codigo

<table class="table table-striped">
              <thead>
                  <tr>
                      <td align="center" style="font-weight: bold;">
                          ID
                      </td>
                      <td align="center" style="font-weight: bold;">
                          FECHA
                      </td>
                      <td align="center" style="font-weight: bold;">
                          EMPRESA
                      </td>
                      <td align="center" style="font-weight: bold;">
                          ORIGEN
                      </td>
                      <td align="center" style="font-weight: bold;">
                          DESTINO
                      </td>
                      <td align="center" style="font-weight: bold;">
                          PLACA
                      </td>
                      <td align="center" style="font-weight: bold;">
                          CONDUCTOR
                      </td>
                      <td align="center" style="font-weight: bold;">
                          VALOR
                      </td>
                      <td  align="center" style="font-weight: bold;">
                          PDF
                      </td>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for="viaje in viajes" v-bind:key="viaje">
                      <td style="font-weight: bold;" align="center">{{ viaje.id }}</td> 
                      <td align="center">{{ viaje.fecha }}</td>
                      <td align="center">{{ viaje.nombreTercero }}</td> 
                      <td align="center">{{ viaje.ciudadOrigen }}</td>  
                      <td align="center">{{ viaje.ciudadDestino }}</td>
                      <td align="center">{{ viaje.placaVehiculo }}</td>
                      <td align="center">{{ viaje.nombreConductor }}</td>
                      <td align="center">${{ viaje.valor }}</td>
                      <td align="center"><span v-if="visibilidad.iconoGenerandoPdf" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><div class="btn btn-sm btn-primary" @click="generarPdfViaje(viaje.id)">PDF</div></td>
                  </tr>
              </tbody>
          </table>

en la cual al agregó al lado del boton PDF un spinner en un span con <span v-if="visibilidad.iconoGenerandoPdf" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

el cual esta por defecto escondido pues al principio tengo una variable ractiva

var visibilidad = reactive({
        iconoGenerandoPdf:false
      })

la cuestion es que cuando le doy a la funcion que me genera el pdf, lo primero que hago es mostrar el spinner, pero me lo muestra en todos los botones ya que todos tienen el mismo v-if

const generarPdfViaje = (idViaje) =>{
        visibilidad.iconoGenerandoPdf = true;

//de aqui para abajo genero el pdf del viaje que ya tengo capturado como idViaje 
}

lo que quiero saber es como podría hacer para que solo se muestre el span del boton al cual le estoy dando click para que el cliente vea que esta cargando la descarga del pdf unicamente de ese viaje

gracias!!

1 respuesta 1

0

Realmente el problema es que tu variable es general y se usa la misma en todas las filas de la tabla, para hacer que solo una fila muestre el spinner al darle al botón es necesario que definas una variable única, te propongo el siguiente código:

const generarPdfViaje = (viajeItem) => {
    viajeItem.generatingPDF = true
        
    // Para Vue 2 usa el siguiente código
    this.$set(viajeItem, 'generatingPDF', true)
}

En el anterior código lo que hacemos es recibir como parámetro todo el objeto del viaje y crearle una nueva propiedad llamada generatingPDF, que será única para esa fila, con ello podremos controlar el spinner. Ahora va el HTML:

    <td align="center">
       <span v-if="viaje.generatingPDF" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
       <div class="btn btn-sm btn-primary" @click="generarPdfViaje(viaje)">
          PDF
       </div>
   </td>

Espero que eso resuelva tu problema.

2
  • entiendo!, una pregunta, esto funciona con Vue3, lo hago pero me sale Uncaught TypeError: this is undefined Commented el 30 jun. 2022 a las 13:44
  • En Vue 3 no usas this, utiliza el primer código que te propuse viajeItem.generatingPDF = true. Commented el 30 jun. 2022 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.