Checkbox not updating when used in table header slot.

I have been attempting to add a 3 state (true, false, intermediate) checkbox to the header of a table which ties in with each rows individual checkboxes. I am able to calculate and update the state of the checkbox and render it as I would like using a calculated function with getter and setter, however the checkbox within the header doesn’t render correctly. I have tried simplifying the checkbox within the header and found that it still doesn’t work. Here’s some example code:

<b-table :items="items" :fields="fields" :filter="filter">
  <template slot="HEAD_selected" scope="data">
    <input type="checkbox" v-model="allSelected"> {{allSelected}}
  </template>
  <template slot="selected" scope="entry">
    <input type="checkbox" v-model="allSelected">
  </template>
</b-table>

In this example, the table contains a column for ‘selected’ The header contains a checkbox bound to ‘allSelected’ along with an output of the ‘allSelected’ variable, and each row also has a checkbox bound to ‘allSelected’. Clicking the header checkbox updates the ‘allSelected’ variable, and the checkbox in every row updates accordingly, however the checkbox in the header remains unchanged. Clicking the checkbox again does nothing, as if the checkbox itself is still in its previous state. Clicking any of the checkboxes in the rows updates all checkboxes including the one in the header.

I have tried this with a standard checkbox, like the example above, and using the Bootstrap Vue b-form-checkbox.

[tmorehouse]

When checkboxes are bound to the same v-model, they typically return an array to the v-model, with a value for each checked checkbox.

You probably need two variables, one for the check all, and one for the rows.

Check out this fiddle which is using checkboxes for select individual and select all…

https://jsfiddle.net/bootstrapvue/js5dqnjv/

[mauriciojsola]

Hi, why the checkboxes are no longer rendering as “checkboxes”? I have the same issue when using code like this:

<template slot="ProductSelection" slot-scope="row">
              <b-form-checkbox
                v-model="row.IsSelected"
                @input="onPreviewClick($event, row.index, row.item)"
              ></b-form-checkbox>
            </template>

https://jsfiddle.net/js5dqnjv/75/

Thanks!