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

Question

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" 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: []
}

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

tony19 · Accepted Answer · 2022-03-07 06:11:49Z

2

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:

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"
>

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

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

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

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

demo

answered Mar 7, 2022 at 6:11

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related