Bootstrap Vue checkbox <b-table> <b-form-checkbox>

Question

I'm trying to use b-form-checkbox with b-table. Try to retrieve the selected module ID.

<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" class="mr-1">
            </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: []
}

While I am able to retrieve the selected module IDs, I cannot remove them when toggling the checkbox. If anyone could provide an idea on how to track whether a checkbox is checked (true) or unchecked (false). Thanks in advance.

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

Answer 1

The checkbox value is already stored in list.modules[].selected via v-model, so you can just use the calculated prop to get the selected module instead Instead of using a separate selected array:

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

2. Remove the selection method and the selected data attribute as they are no longer needed.

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

3. Add a computed property for filtering selected modules in list.modules[]:

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

Demo