question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

42reactions
nekosaurcommented, Aug 12, 2019

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>
9reactions
cby016commented, Apr 1, 2020

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>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Vuetify single select data table by row - Stack Overflow
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...
Read more >
v-data-table API - Vuetify
Emits when a table row is double-clicked. The item for the row is included. NOTE: will not emit when table rows are defined...
Read more >
Vuetify v-data-table with selected rows and custom ... - CodePen
Sort by Sort by Sort by Sort by Sort by Dessert (100g serving) Custom Frozen Yogurt Calories. 159 Fat (g). 6 Carbs (g). 24 Dessert...
Read more >
Data table component — Vuetify.js
You can customize these with the slots header.data-table-select and item.data-table-select respectively. You can also switch between allowing multiple selected ...
Read more >
How do you preselect rows in the v-data-table component?
I've created a v-data-table with a single select attribute, a row can have a ... </template> <template v-slot:item.data-table-select="{ item } ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found