3

I am currently trying to customize the select all checkbox for a Vue Datatable (v-datatable). All I'd really like to do is add a label or perhaps a tooltip to the checkbox itself. To do this, I'd like to utilize the Header Data Table Select Slot/header.data-table-select, and change the element from a v-simple-checkbox to a regular v-checkbox.

When I add in a template that uses the v-simple-checkbox, the checkbox works perfectly fine. You can click it and select/deselect all of the rows without an issue. Here is a Codepen showcasing this.

However, if I use the regular v-checkbox, then the select/deselect all functionality leaves entirely. This Codepen showcases this.

What do I have to hook the on value up to in order to get it to work correctly in this case since v-on does not seem to doing it? Or is there an easier way to customize this checkbox that I'm missing?

Francis Bartkowiak
  • 1,374
  • 2
  • 11
  • 28

1 Answers1

3

Setup your v-checkbox like this

<v-checkbox
   :input-value="props.value"
   :indeterminate="props.indeterminate"
   @change="on.input"
>
</v-checkbox>
cmfc31
  • 1,385
  • 2
  • 8
  • 9