I am trying to use b-form-checkbox with b-table. Trying to retrieve the selected module Ids.

<b-table
    id="module-table"
    :items="list.modules"
    :fields="fields"
    :busy="isBusy">

    <template slot="num" slot-scope="row">
    {{ row.index   1 }}
    </template>

    <template slot="checkbox" slot-scope="row">
        <b-form-group>
            <b-form-checkbox v-if="!isLoading" v-model="row.item.selected" @change="selection(row.item.moduleId)" variant="outline-secondary" >
            </b-form-checkbox>
        </b-form-group>
    </template>
</b-table>

data: {
  fields: [
    { key: 'checkbox', label: '', class: 'd-none d-lg-table-cell' },
    { key: 'num', label: 'Num', class: 'd-none d-lg-table-cell' },
  ],
  selected: []
}

Though I am able to retrieve the selected module Ids but unable to delete them while switching the checkboxes. If anyone can provide an idea on how to track if the checkbox is selected (true) or not selected (false). Thanks in advance.

 methods: {
     selection(item) {
          if (true)
              app.selected.push(item);
          else
              app.selected = app.selected.map(x => x != item);
     }
 },

CodePudding user response：

The checkbox values are already stored in list.modules[].selected via the v-model, so you could just use a computed prop to get the selected modules instead of using a separate selected array:

1. Remove the @change="selection(⋯)" from <b-form-checkbox>:

<!--
<b-form-checkbox
  v-model="row.item.selected"
  @change="selection(row.item.moduleId)" // remove
>
-->

<b-form-checkbox
  v-model="row.item.selected"
>

2. Remove the selection method and selected data property, since they're no longer needed.

export default {
  data() {
    return {
      // selected: []  // remove
    }
  },
  methods: {
    // selection() {⋯}  // remove
  }
}

3. Add a computed prop that filters list.modules[] for selected modules:

export default {
  computed: {
    selected() {
      return this.list.modules.filter(module => module.selected)
    },
  },
}

demo