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
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!!