Below I show what I want to achieve. I have a button in a simple-table. That its function is to select the row in which I am standing. Look for some information, but the only thing I get is that I select the entire row. This is my table.
<v-simple-table fixed-header height="300px">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Tipo</th>
<th class="text-left">Numero trabajo</th>
<th class="text-left">Cliente</th>
<th class="text-left">Entrega</th>
<th class="text-left">Comentario</th>
<th class="text-left">Tareas</th>
<th class="text-right">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="item in presupuestos" :key="item.id" :style="TheStyle">
<td>{{ item.tipoPresupuestoString }}</td>
<td>{{ item.numero }}</td>
<td>{{ item.cliente.nombre }}</td>
<td>{{ formatDate(item.fechaEntrega) }}</td>
<td>{{ item.presupuestoComentarioString }}</td>
<td>{{ item.tareas }}</td>
<td class="text-right">
<v-icon
title="Seleccionar OT"
@click="selectedPresupuesto(item)"
>mdi-tab-search</v-icon
>
<v-icon title="Nueva Tarea" @click="abrirPopupNuevaTarea(item)"
>mdi-hospital</v-icon
>
<v-icon
title="Listado de Tareas"
@click="abrirPopupListadoTarea(item)"
>
mdi-archive-edit-outline
</v-icon>
<v-icon
title="Agregar comentario"
class="ml-2"
@click="popUpComentario(item)"
>mdi-message</v-icon
>
<v-icon title="Descargar" class="text-center" @click="download(item)"
>mdi-download</v-icon
>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
Through this icon that has the @click="selectedBudget(item)", I have to select the entire row. (in the item comes all the data)
data() {
return {
selected: false,
TheStyle: {
backgroundColor: "",
},
};
And here the method:
selectedPresupuesto(item) {
this.presupuestoSeleccionado = item;
this.$data.TheStyle.backgroundColor = "grey";
},
attached screen image: