How to highlight one row of a q-table at a time?

[omar]

Hello, I am a quasar beginner. I have trouble with a q-table. I want to highlight one row at a time at click on the row. My code for the q-table is:

<q-table class="my-sticky-virtscroll-table"
                     virtual-scroll
                     :pagination.sync="pagination"
                     :rows-per-page-options="[0]"
                     :virtual-scroll-sticky-size-start="48"
                     row-key="index"
                     :columns="JobColumns"
                     :data="lavoriFiltered"
                     no-data-label="Nessun lavoro trovato"
                     hide-bottom
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th v-for="col in props.cols"
                        :key="col.name"
                        :props="props">
                    {{ col.label }}
                  </q-th>
                </q-tr>
              </template>

              <template v-slot:body="props">
                  <q-tr :props="props" class="cursor-pointer" :class="props.row.selected ? 'bg-light-blue-5 text-white' : ''" @click="selectRow(props)">
                  <q-td v-for="col in props.cols"
                        :key="col.name"
                        :props="props">
                    {{ col.value }}
                  </q-td>
                </q-tr>
              </template>
            </q-table>

And the method selectRow mutates props.row.selected passing from false to true and viceversa:

selectRow(props) {
      this.toggleSelected(props.row)
    }

And this is the toggleSelected mutation in the Vuex store:

toggleSelected({commit}, row) {
    if (row.hasOwnProperty('selected')) {
      Vue.set(row, "selected", !row.selected)
    } else {
      Vue.set(row, "selected", true)
    }

My problem is that with this code one can highlight more than one row with subsequent clicks, instead I want to deselect the row that I’ve clicked before when I click on another row.
To do this, I think I should have access to all rows in the q-table to set the selected flag to false.
Perhaps is there a way of doing this using the props at the body slot level? I can access only the props at the row level, but obviously this object doesn’t carry information about all the rows.
If this strategy doesn’t work, how can I do? And in general, what are the props at the body slot level for?

Thanks in advance,

Omar

[dobbel]

@omar

you could just create a variable that has a reference to the previous selected row. Then you can unselect it the next time you click on a different row.

[omar]

@dobbel

Thanks a lot, your idea worked! I modified the toggleSelected mutation in this way:

toggleSelected({commit}, row) {
    if (row !== state.selectedRow) {
      Vue.set(state.selectedRow, "selected", false)
      Vue.set(row, "selected", true)
      state.selectedRow = row
    }
}

So, the props at the body slot level are useless?