Bootstrap-Vue: Implementing Role Permissions as Multiple arrays of b-form-checkbox displayed as columns in b-table. Not working

bootstrap vue b-table
bootstrap-vue table checkbox
bootstrap-vue table example
bootstrap-vue custom css
bootstrap-vue table hide column
vue js bootstrap alert
bootstrap-vue loader
vue js table

The Problem I am trying to create a page to manage permissions by role as demonstrated in the following image:

As currently implemented, a click in any box results in all of the boxes in that column becoming checked.

Ex.: a click in "Create Users" of "Admin" will look as follows:

Likewise, a check in any of the other columns would result in all of the check boxes for that column being checked. In either case, clearing any checkbox also clears all the checkboxes in that column.

I'm not sure what's going on, but note that if I reverse the comments in the table and run with the other checkboxes, the behavior is such that all columns under "Admin" get checked regardless of which column I checked a box.

Here's the relevant template html and script for the component as well as a the relevant script from the vuex store. Thanks in advance for any help!!

import {
  store
} from "../store/store";

export default {
  data() {
    return {
      items: this.$store.state.permissions,
      roles: this.$store.state.roles,

      adminRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Admin')].rolePermissions,
      salesRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Sales')].rolePermissions,
      maintRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Maintenance')].rolePermissions,
      accouRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Accounting')].rolePermissions,

      fields: [{
          key: "name",
          label: "Permission",
          class: "text-right"
        },
        {
          key: "admin",
          label: "Admin",
          class: "text-center"
        },
        {
          key: "sales",
          label: "Sales",
          class: "text-center"
        },
        {
          key: "maint",
          label: "Maintenance",
          class: "text-center"
        },
        {
          key: "account",
          label: "Accounting",
          class: "text-center"
        },
      ]
    };
  },
        <b-table responsive :items="items" :fields="fields" head-variant="dark">
            <template slot="admin" slot-scope="row">
              <b-form-checkbox id="admin" v-model="adminRolePermissions" value="row.item.id"/>
              <!-- <b-form-checkbox v-model="adminRolePermissions" v-bind:id="row.item.id"/>               -->
            </template>
            <template slot="sales" slot-scope="row">
              <b-form-checkbox id="sales" v-model="salesRolePermissions" value="row.item.id"/>
              <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/>               -->
            </template>
            <template slot="maint" slot-scope="row">
              <b-form-checkbox id="maint" v-model="maintRolePermissions" value="row.item.id"/>
              <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/> -->              
            </template>            
            <template slot="account" slot-scope="row">
              <b-form-checkbox id="accou" v-model="accouRolePermissions" value="row.item.id"/>              
              <!-- <b-form-checkbox v-model="accouRolePermissions" v-bind:id="row.item.id"/> -->
            </template>
        </b-table>

You need to use b-form-checkbox-group to bind v-model as an array. I'm not sure how to do it inside v-table, but there is a workaround with methods

<b-form-checkbox id="admin" v-model="adminRolePermissions" 
  @input="onInputAdminRoles($event, row.item.id)"
  :checked="adminRolePermissions.includes(row.item.id)" value="row.item.id"/>

and defined custom method:

 methods: {
    onInputAdminRoles (isCheck, roleId) {
      if (isCheck) {
        this.adminRolePermissions = this.adminRolePermissions.concat([roleId])
      } else {
        this.adminRolePermissions = this.adminRolePermissions.filter (item => item !== roleId)
      }
    }
  }

slot not working on b-table, showing empty colmns on custom , Bootstrap-Vue: Implementing Role Permissions as Multiple arrays of b-form-​checkbox displayed as columns in b-table. Not working. bootstrap-vue table  Laravel 5 package for handling column sorting with pagination example. In this Laravel 5.6 Tutorial, I will let you know how to implement column sorting and pagination with example using kyslik/column-sortable package. This is very easiest way to get links on the column headings in the table to sort the table data.

Try setting a key on your checkboxes.

<b-table responsive :items="items" :fields="fields" head-variant="dark">
  <template slot="admin" slot-scope="row">
    <b-form-checkbox id="admin" :key="row.index" v-model="adminRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="adminRolePermissions" v-bind:id="row.item.id"/>               -->
  </template>
  <template slot="sales" slot-scope="row">
    <b-form-checkbox id="sales" :key="row.index" v-model="salesRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/>               -->
  </template>
  <template slot="maint" slot-scope="row">
    <b-form-checkbox id="maint" :key="row.index" v-model="maintRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/> -->              
  </template>            
  <template slot="account" slot-scope="row">
    <b-form-checkbox id="accou" :key="row.index" v-model="accouRolePermissions" value="row.item.id"/>              
    <!-- <b-form-checkbox v-model="accouRolePermissions" v-bind:id="row.item.id"/> -->
  </template>
</b-table>

Table | Components, The problem is that the slots are not working at all with fields array on datatable, <template slot="checkbox" slot-scope="row"> <b-form-checkbox 2.0.0 and still not getting checkbox and action column that is a custom column, See https​://bootstrap-vue.org/docs/components/table#comp-ref-b-table-slots  Unlike with radio buttons, a set of checkboxes are not logically tied together in the code. So from HTML’s point of view, each checkbox in a set of checkboxes is essentially on its own.

Combining ittus's suggestion regarding b-form-checkbox-group with several attempts and re-reads of the bootstrap-vue docs I come up with the following:

<script>
export default {
  data() {
    return {
      permissions: [{
          id: "a1",
          name: "View Assets"
        },
        {
          id: "a2",
          name: "Add Asset"
        },
        {
          id: "a3",
          name: "Modifiy Assets"
        }
      ],

      roles: [{
          name: "Admin",
          permissions: ["a1", "a2", "a3"]
        },
        {
          name: "Sales",
          permissions: ["a1"]
        },
        {
          name: "Maintenance",
          permissions: ["a1"]
        },
        {
          name: "Accounting",
          permissions: ["a1"]
        },
      ]
    };
  },
};
</script>
<style>
.headerRow {
  padding: .75rem;
  background-color: #000000;
  color: #ffffff;
  font-weight: bold;
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.bodyRow {
  padding: .75rem;
  border-top: 1px solid #dee2e6;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<template>
  <div>
    <b-row>
      <b-col>
        <b-container>
          <div id='permissionsTable'>
            <b-row class='headerRow'>
              <b-col cols='3'>Permissions</b-col>
              <b-col v-for="role in roles" v-bind:key="role.name">{{role.name}}</b-col>
            </b-row>
            <b-row v-for="permission in permissions" v-bind:key="permission.name" class="bodyRow">
              <b-col cols='3'>{{permission.name}}</b-col>
              <b-col v-for="(role, index) in roles" v-bind:key="role.name">
                <b-form-checkbox-group v-bind:id="role.name" v-bind:name="role.name + 'Permissions'" v-model="roles[index].permissions" >  
                  <b-form-checkbox v-bind:value="permission.id"/>
                </b-form-checkbox-group>
              </b-col>
          </b-row>
         </div>
        </b-container>
      </b-col>
    </b-row>
  </div>
</template>

Bootstrap vue checkbox, For simple display of tabular data without all the fancy features, BootstrapVue also <b-table> serializes the row data into strings for sorting and filtering, and circular label="Table Options" label-cols-lg="2"> <b-form-checkbox v-model="​striped" Sticky columns will only work when the table has either the sticky-​header  Overview. An HTML Form is a group of one or more fields/widgets on a web page, which can be used to collect information from users for submission to a server. Forms are a flexible mechanism for collecting user input because there are suitable widgets for entering many different types of data, including text boxes, checkboxes, radio buttons, date pickers and so on.

Changelog | Misc, In this post, we will learn about vue js Checkbox Checked And Save Multiple is set as checkbox. but those custom template are not showing in slot template. and frameworks implementing Bootstrap's CSS framework in React, Vue and Angular. How can i use b-form-checkbox inside v-for Are you sure twitte bootstrap  I searched a lot on the internet and have not found the solution to my problem. Im working with AJAX, PHP and Datatables. The pluing works fine. I could display the records in my Datatable. I want to do that does not work is that when mouse over each row, it "lights" and removing the mouse b

bootstrap-vue, b-dropdown: new split-button-type prop to specify split button type (closes #3694) b-table-lite: new <b-table-lite> light-weight table component (#3447 0477941) in v2.0.0-rc.21) due to issues with Nuxt.js and some webpack builds expecting CJS b-modal: use safeId() when comparing id received by hide/show handler  Get code examples like "change dxform label angular" instantly right from your google search results with the Grepper Chrome Extension.

Building Custom Multi-Option Form Components with Vue.js , The CDN for bootstrap-vue. src/components/table/helpers/mixin-stacked.js",". Some components (`<b-col>` and `<b-form-group>`) generate props based on definition is only called/executed when the first access to the\n// component is if there are multiple instances of Vue, and warns (once) about possible issues. Learn Web Design & Development with SitePoint tutorials, courses and books - HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design

Comments
  • Unfortunately, this did not work, but thanks for offering the help. The workaround results in the same behavior. Also, you need a :stop after the @input so as to stop the infinite loop which occurs otherwise...
  • I ended up building off the first sentence in your answer. I'm going to provide my own answer below to demonstrate the result. Thanks!!