Javascript 选中Vue中一个复选框上的所有复选框

我正在使用引导vue。我尝试在一个复选框上选中我的b表中的所有复选框。我的复选框位于名为“selected”的插槽中的b表in标记中

---

如何在单击表顶部的“全选”复选框时选中所有复选框并取消选中所有复选框？选中所有复选框后，它将返回所有“mctname”数据。

您可以添加一个

watch

hook：

watch: {
    allSelected: {
        immediate: true,
        handler: function(val) {
            if (val) {
                this.selectAll = true;
                this.returnData();
            } else {
                this.selectAll = false;
            }
        }
    }
}

然后使所有复选框依赖于

selectAll

<b-form-checkbox v-model="allSelected">
    {{ allSelected ? 'Uncheck All' : 'Check All' }}         
</b-form-checkbox>

<script>
    export default{
       data: () => {
          return {
             selected:'',
             items:[],
             allSelected: false,
             fields:{
                   mid: {
                   label: "MID",
                   mid: "MID",
                },
                   mctname: {
                   label: "Name",
                   sortable: true,
                },
                   status:{
                   label: "Status"
                },                 
             },
    }
</script>

    loadTable: function() {
    this.loading = true;
    axios
        .get(baseUrl + ".../get_all_items")
        .then(response => {
        this.items = JSON.parse(response.request.responseText);
        this.loading = false;
        this.totalRows = this.items.length;

        })
        .catch(function(error) {
        console.log(error);
        this.loading = false;
        });
    },

watch: {
    allSelected: {
        immediate: true,
        handler: function(val) {
            if (val) {
                this.selectAll = true;
                this.returnData();
            } else {
                this.selectAll = false;
            }
        }
    }
}