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.

 <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 asiintroducir la descripción de la imagen aquí

1 respuesta 1

0

Vue te permite usar clases dinamicas, de manera que si editas un registro por vez y este se almacena en una variable, puedes evaluar esos valores para determinar cual es el que esta activo para editar.

En la etiqueta tr puedes agregar un a clase dinamica:

<tr ref="record" class="record" v-for="record in pageOfItems" :key="record.Item_id" :class="recordToUpdate.Item_id == record.Item_id ? 'current-update' : ''">

donde recordToUpdate es la variable que almacena el registro que estas actualizando, si tiene el mismo ID que el que registro de la fila seleccionada aplica la clase 'current-update', luego a esa clase en el bloque style le das el color y los estilos que necesites.

<style>
   .current-update {
       background-color: #c0c0c0;
       font-weight:bold;
       ...
   }
</style>

para que sea un poco mas claro, vue te permite poner todas las clases en un array, asi que simplificando el primer snippet quedaria algo asi:

    <tr ref="record" v-for="record in pageOfItems" :key="record.Item_id" :class="['record', recordToUpdate.Item_id == record.Item_id ? 'current-update' : '']">

donde por defecto tiene la clase record, pero condicionalmente se le asigna la clase 'current-update' de forma dinamica.

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.