Vuetify: [Documentation] Data Table slots - item.data-table-select does not work

Created on 9 Aug 2019  路  7Comments  路  Source: vuetifyjs/vuetify

Environment

Browsers: Chrome 76.0.3809.87
OS: Mac OS 10.14.5

Steps to reproduce

Choose item.data-table-select from slot select

Expected Behavior

Checkboxes work and are selected / de-selected

Actual Behavior

Checkboxes don't work

Reproduction Link

https://vuetifyjs.com/en/components/data-tables#slots

Other comments

I'm trying to migrate from https://v15.vuetifyjs.com/en/components/data-tables#slot-items-and-headers for using checkboxes and bind their v-model to the data-table v-model. The current documentation doesn't make it clear on how this is done in 2.0. Previously, you used v-slot:items="props and then :input-value="props.selected" for the checkbox, whereas now if I need to edit the template for a 2.0 data table to accommodate a checkbox and bind its functionality to the data table v-model, I have no idea how it works.

VDataTable documentation

Most helpful comment

The diff of the commit I linked to shows the markup

<template v-slot:item.data-table-select="{ isSelected, select }">
  <v-simple-checkbox :value="isSelected" @input="select($event)"></v-simple-checkbox>
</template>

All 7 comments

Fixed in edd367412

Thanks for fixing this. But is there any documentation/example available of what is described in 'other comments' and how to migrate?

v1.5:

<template v-slot:item="props">
    <tr>
        <td>
            <v-checkbox :input-value="props.selected"></v-checkbox>
        </td>
        <td>Custom property getter code</td>
    </tr>
</template>

v2.x:
??

EDIT: Sorry. I found some examples here: https://vuetifyjs.com/en/components/data-tables#slots

The diff of the commit I linked to shows the markup

<template v-slot:item.data-table-select="{ isSelected, select }">
  <v-simple-checkbox :value="isSelected" @input="select($event)"></v-simple-checkbox>
</template>

As at 2.0.11 I found I had to use the "change" (not "input") event e.g.
<v-checkbox hide-details :value="isSelected" @change="select($event)" />

for v-checkbox, it's input-value and @change
for v-simple-checkbox, it's value and @input

I finally got this to work with the item slot using this markup:

<template v-slot:item="props">
  <tr>
    <td><v-checkbox :input-value="props.isSelected" @change="props.select($event)"></v-checkbox></td>
    <td>{{ props.item.name }}</td>
    ...
  </tr>
</template>

How to pass the desired value using item.data-table-select ?? I want to pass item.mobileNo if someone ticks the checkbox. Codepen for the same: https://codepen.io/spider007/pen/ZEbYxrd

Was this page helpful?
0 / 5 - 0 ratings