How to make the checkbox react to clicks (bootstrap-vue)?

Question

Bootstrap

I am using bootstrap vue. I need to make a table where the first column is a checkbox. In the columns where tbody I could implement, but it doesn’t work in thead, the checkbox itself is there, but when pressed, it does not change its state. The isActive field is responsible for the state of the checkboxes.
Implementation code

<template>
    <div>
        <b-table striped hover :items="items" :fields="fileds">
            <template slot="isActive" slot-scope="data">
                <b-form-checkbox></b-form-checkbox>
            </template>
            <template slot="HEAD_isActive" slot-scope="data">
                <b-form-checkbox></b-form-checkbox>
            </template>
        </b-table>
    </div>
</template>

<script>
    const fileds = [
        'isActive',
        'email',
        {
            key: 'name',
            label: 'Наименование'
        },
        {
            key: 'phone',
            label: 'Телефон'
        },
        {
            key: 'responsible',
            label: 'Ответственный'
        },
        {
            key: 'deals',
            label: 'Сделки'
        }
    ];
    const items = [
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Купил' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Продал' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Купил' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Продал' },
    ];

    export default {
        name: "BaseTable",
        data() {
            return {
                fileds: fileds,
                items: items
            }
        }
    }
</script>

<style scoped>

</style>

Sample implementation https://jsfiddle.net/eywraw8t/425019/

Answer 1

In columns where tbody I was able to implement

Not completely - you have no connection between the checkbox and the value of the corresponding property. Need to do:

<template slot="isActive" slot-scope="{ item }">
  <b-form-checkbox v-model="item.isActive"></b-form-checkbox>
</template>

but it doesn't work in thead

Make a computed property that will represent the overall state of all the checkboxes in the column. The getter returns trueif all checkboxes are true; setter - assign the passed value to all checkboxes:

checkedAll: {
  get() {
    return this.items.every(n => n.isActive);
  },
  set(val) {
    this.items.forEach(n => n.isActive = val);
  },
},

And use this property in the header:

<template slot="HEAD_isActive" slot-scope="data">
  <b-form-checkbox
    @click.native.stop
    :checked="checkedAll"
    @change="checkedAll = $event"
  ></b-form-checkbox>
</template>

https://jsfiddle.net/k1cbz7nu/