Check all checkbox on one checkbox in Vue

Question

I'm using Bootstrap vue. And I attempt to check all checkboxes in my b-table on one checkbox. My checkboxes are in a b-table in tag within slot named "selected".

<b-table id="myTabel"
            head-variant="light"
            :items="items"
            :fields="fields">
            <template slot="selected" slot-scope="row">
               <b-form-group>
                  <b-form-checkbox-group id="checkbox-group-2" v-model="selected">
                     <b-form-checkbox :value="row.item.mctname"/>
                  </b-form-checkbox-group>
               </b-form-group>
            </template>
</b-table>

This is my 'Check all' checkbox

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

And this is my script code

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

I'm using axios for my table data

    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;
        });
    },

How can I select all checkboxes and deselect all checkboxes on the click of a "Check All" checkbox that I have in top of my table? And after all the checkboxes are checked, it will return all "mctname" data.

half of a glazier half of a glazier · Accepted Answer · 2020-02-05T11:03:00

You could add a watch hook:

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

And then make all the checkboxes dependent on selectAll

Check all checkbox on one checkbox in Vue

1 Answers