Paint selected row vue js

Viewed 78

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:

enter image description here

1 Answers

Just use index instead of boolean, and set condition in binded style:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      presupuestos: [{id: 1, numero: 1, cliente: {nombre: 'aaa'}, tareas: 'ff'}, {id: 2, numero: 2, cliente: {nombre: 'bbb'}, tareas: 'dd'}],
      selected: null,
      theStyle: { backgroundColor: "", },
    }
  },
  methods: {
    selectedPresupuesto(item) {
       //  set index 
      this.selected = item;
      this.theStyle.backgroundColor = "grey";
    },
  }
})
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-simple-table fixed-header height="300px">
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">Numero trabajo</th>
          <th class="text-left">Cliente</th>
          <th class="text-left">Tareas</th>
          <th class="text-right">Acciones</th>
        </tr>
      </thead>
      <tbody>
                        <!--  use index in loop -->                 <!--  set condition -->
        <tr v-for="(item, index) in presupuestos" :key="item.id" :style="index == selected && theStyle">
          <td>{{ item.numero }}</td>
          <td>{{ item.cliente.nombre }}</td>
          <td>{{ item.tareas }}</td>
          <td class="text-right">
                                    <!--  pass index -->
            <v-icon
              @click="selectedPresupuesto(index)"
              title="Seleccionar OT"
              >mdi-tab-search</v-icon
            >
          </td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Related