CODEWITHSUNDEEP
javascriptvue.jsbootstrap-vue
Honey Singh
Honey Singh

Reputation: 327

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

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

Upvotes: 0

Views: 3679

Answers (1)

tony19
tony19

Reputation: 138286

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"
>
  1. Remove the selection method and selected data property, since they're no longer needed.
export default {
  data() {
    return {
      // selected: []  // remove
    }
  },
  methods: {
    // selection() {⋯}  // remove
  }
}
  1. Add a computed prop that filters list.modules[] for selected modules:
export default {
  computed: {
    selected() {
      return this.list.modules.filter(module => module.selected)
    },
  },
}

demo

Upvotes: 2

Related Questions