Как сделать, чтобы чекбокс реагировал на нажатия (bootstrap-vue)?

Question

[Руслан Абсалямов]

Я использую bootstrap-vue. Мне нужно сделать таблицу, где первый столбец это чекбокс. В колонках где tbody я смог реализовать, но вот в thead не получается, сам чекбокс имеется, но при нажатии он не меняет своего состояния. За состояние чекбоксов отвечает поле isActive.
Код реализации

<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>

Примерная реализация https://jsfiddle.net/eywraw8t/425019/

Answer 1

[0xD34F]

В колонках где tbody я смог реализовать

Не до конца - у вас нет связи между чекбоксом и значением соответствующего свойства. Надо сделать:

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

но вот в thead не получается

Делаете вычисляемое свойство, которое будет представлять общее состояние всех чекбоксов в столбце. Геттер возвращает true, если все чекбоксы true; сеттер - назначаете всем чекбоксам переданное значение:

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

И используете это свойство в хедере:

<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/