Vuetify single select data table by row

Question

I'm trying to get a Vuetify single select data table to be selectable by the row instead of by a checkbox.

The current example I see on Vuetify's documentation is: Ex. 1 https://vuetifyjs.com/en/components/data-tables#api. That's generally what I want but I want to remove the checkbox and just select by row.

I saw a previous version was able to accomplish something close with slots: Ex. 2 https://v15.vuetifyjs.com/en/components/data-tables.

I've attempted a few different approaches to use slots in the 2.1.3 release but I seem to be missing something since I haven't been able to get it to work. I'm current what I want implemented using a button, but I seem to have trouble with getting the row selectable.

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
    >
        <template v-slot:item.data-table-select="{ isSelected, select }">
            <v-btn color="green" :value="isSelected = !isSelected" @click="select($event)"></v-btn>
        </template> 
</v-data-table>

EDIT: I tried to implement a selectable data table with slots but it doesn't seem like item.selected works? Is this still the correct method to select a row item?

<v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    show-select
    class="elevation-1"
    >
        <template v-slot:body="{ items }">
            <tbody>           
                <tr v-for="item in items" :key="item.name" :active="item.selected" @click="item.selected = !item.selected">
                    <td>{{ item.name }}</td>
                    <td>CONTENT</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.calories }}</td>
                    <td>{{ item.fat }}</td>
                    <td>{{ item.carbs }}</td>
                    <td>CONTENT</td>
                </tr>
           </tbody> 
      </template>
</v-data-table>

Roduan Roduan · Accepted Answer · 2020-05-09T11:04:00

if you want to make single data select you have to make selected item key stored in another variable like "selectedItem", you should change your code like this:

<tr v-for="item in items" :key="item.name" 
  :active="selectedItem == item.name" @click="selectedItem = item.name">

PS:

make sure to use unique key for your items
selectedItem is a variable in the data object

Vuetify single select data table by row

3 Answers