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 . 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 acplish something close with slots: Ex. 2 .

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>

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./en/ponents/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 acplish something close with slots: Ex. 2 https://v15.vuetifyjs./en/ponents/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>

• javascript
• vue.js
• vuetify.js

3 Answers 3

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

I think your problem is your props

 single-select="true"

in your template u used single-select="true" and vuetify is looking for data that named true ex.

    data () {
        return {
                true:true
               }
          }

if you have data name true I there will be no problem I think the right way to do that is

 single-select

that means that you set the value for props single-select = true you can check documentation here

I tried syntax :single-select=true and it worked fine.