Browsers: Chrome 76.0.3809.87
OS: Mac OS 10.14.5
Choose item.data-table-select
from slot select
Checkboxes work and are selected / de-selected
Checkboxes don't work
https://vuetifyjs.com/en/components/data-tables#slots
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.
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
Most helpful comment
The diff of the commit I linked to shows the markup