0

Estoy trayendo data del servidor en un arreglo y los pinto usando vfor. Ya tengo un boton para modificar un registro especifico, sin embargo quiero que el registro al que hago click se sombree para que se sepa cual registro se esta actualizando. Cabe aclarar que ya puse el hover para cada registro, pero como se sabe se aplica solo cuando el cursor esta encima.

Estoy usando vue 2. Esta es mi tabla.

 <tbody  v-on:click="seleccionar">
      <tr ref="record" class="record" v-for="record in pageOfItems" :key="record.Item_id">
        <td ref="record">{{ record.Item_id  }}</td>
        <td>{{ record.CodigoArticulo }}</td>
        <td>{{ record.Categoria }}</td>
        <td>{{ record.Marca }}</td>
        <td>{{ record.DescripcionArticulo }}</td>
        <td>{{ record.PC_Maniuco }}</td>
        <td>{{ record.PC_Lubrimac }}</td>
        <td>{{ record.PC_DiezMinutos }}</td>
        <td>{{ record.PC_Biogas }}</td>
        <td>{{ record.PC_Machine }}</td>
        <td>{{ record.StockPrincipalManiuco }}</td>
        <td>{{ record.StockTiendaManiuco }}</td>
        <td>{{ record.StockPrincipalLubrimac }}</td>
        <td>{{ record.StockTiendaLubrimac }}</td>
        <td>{{ record.StockPrincipalDiezMinutos }}</td>
        <td>{{ record.StockTiendaDiezMinutos }}</td>
        <td>{{ record.StockPrincipalBiogas }}</td>
        <td>{{ record.StockTiendaBiogas }}</td>
        <td>{{ record.StockPrincipalMachine }}</td>
        <td>{{ record.StockMachine }}</td>
        <td>{{ record.StockTotalPrincipal }}</td>
        <td>{{ record.StockTotalTienda }}</td>
        <td>{{ record.StockTotal }}</td>
        <td>{{ record.UnidadMedida }}</td>
        <td>{{ record.Equivalencia }}</td>
        <td>{{ record.Ubicacion }}</td>
      </tr>
        </tbody>

Y se ve algo asi:

Esos son los registros, al hacer click en uno quiero que se sombree para posteriormente hacer click en modificar

1 respuesta 1

0

Te sugiero que utilices una variable para almacenar el id del registro seleccionado. Al hacer clic en un tr se actualiza el valor de esta variable que se utilizará para aplicar condicionalmente una clase a tr (para cambiar el color de fondo)

Compruébalo:

<tbody v-on:click="seleccionar">
   <tr ref="record" class="record" v-for="record in pageOfItems" :key="record.Item_id" v-on:click="selectedItemId = record.Item_id" v-bind:class="{ 'bg-gray': selectedItemId === record.Item_id }">
      <td ref="record">{{ record.Item_id  }}</td>
      <td>{{ record.CodigoArticulo }}</td>
      <td>{{ record.Categoria }}</td>
      <td>{{ record.Marca }}</td>
      <td>{{ record.DescripcionArticulo }}</td>
      <td>{{ record.PC_Maniuco }}</td>
      <td>{{ record.PC_Lubrimac }}</td>
      <td>{{ record.PC_DiezMinutos }}</td>
      <td>{{ record.PC_Biogas }}</td>
      <td>{{ record.PC_Machine }}</td>
      <td>{{ record.StockPrincipalManiuco }}</td>
      <td>{{ record.StockTiendaManiuco }}</td>
      <td>{{ record.StockPrincipalLubrimac }}</td>
      <td>{{ record.StockTiendaLubrimac }}</td>
      <td>{{ record.StockPrincipalDiezMinutos }}</td>
      <td>{{ record.StockTiendaDiezMinutos }}</td>
      <td>{{ record.StockPrincipalBiogas }}</td>
      <td>{{ record.StockTiendaBiogas }}</td>
      <td>{{ record.StockPrincipalMachine }}</td>
      <td>{{ record.StockMachine }}</td>
      <td>{{ record.StockTotalPrincipal }}</td>
      <td>{{ record.StockTotalTienda }}</td>
      <td>{{ record.StockTotal }}</td>
      <td>{{ record.UnidadMedida }}</td>
      <td>{{ record.Equivalencia }}</td>
      <td>{{ record.Ubicacion }}</td>
   </tr>
</tbody>
5
  • Hola. Revise tu solucion y la aplique pero no me funciono. sin embargo por la idea tambien pienso que deberia funcionar. Alguna otra sugerencia? Gracias. el 29 ene. 2021 a las 3:20
  • ¿No funcionó en absoluto? ¿Inspeccionaste el código para verificar que la clase bg-gray no se añade a tr? Lo pregunto porque puede ocurrir que el td tenga un color de fondo para que no se vea el color del tr. Otra posibilidad es que la función select tenga un preventDefault. ¿Lo tiene?
    – dfvc
    el 29 ene. 2021 a las 9:02
  • No funciona. Para descartar hice que se imprimera por pantalla el id de cada registro, y si lo pinta, es decir parece que el problema esta en el v-bind:class. el 29 ene. 2021 a las 15:16
  • ¿Y qué ocurre cuando se imprimen lado a lado selectedItemId y record.Item_id? Es difícil sin ver más código. ¿Puedes compartir un jsfiddle con más código?
    – dfvc
    el 29 ene. 2021 a las 17:19
  • el jsfiddle acepta single file components de Vue? Porque lo intente pero no me salia como esperaba el 29 ene. 2021 a las 20:22

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.