VueJS Bootstrap-Vue b-table - Checkbox all and current items?

Question

I'm using bootstrap-vue b-table with the b-pagination component (https://bootstrap-vue.js.org/docs/components/table/). I'm having it load ~50 items per page, and each row has a b-form-checkbox. I have been unsuccessful with the following:

1) Mapping the row item checkboxes to the main "selectAll" checkbox value at the in the header of the table. The only way i know how to do it is by going through ALL of the items and setting everything to true, but i don't want to do it to all the items. I only want it done on the current list of items on the page. This is also needed for when you are filtering and only showing 10 items, SelectAll should only select those 10 items, not 11K items that aren't shown.

2) How do you get a list of items on the currentPage (pagination) of the table? How do you initialize a checkbox based on the b-table index?

Currently this is my code:

<b-table 
  striped 
  hover 
  small 
  outlined 
  :items="schools" 
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :total-rows="totalRows"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  @filtered="onFiltered"
>
  <template slot="HEAD_selected" slot-scope="data">
    <b-form-checkbox @click.native.stop @change="select" v-model="allSelected">
    </b-form-checkbox>
  </template>

  <template slot="selected" slot-scope="data">
    <b-form-checkbox @click.native.stop :value="data.item.schoolId" :checked="allSelected" v-model="selected">
    </b-form-checkbox>
    {{data.index}}
  </template>
</b-table>
<b-pagination size="md" :total-rows="totalRows" v-model="currentPage" :per-page="perPage">
</b-pagination>

I know if I just looped through the "schools" array I could set the check boxes. But I don't know which ones are being shown on the page, and I don't want any checkboxes "checked" if they aren't shown.

Is there perhaps a way to set a checkbox to true based on the b-table index of the row? Can I loops through the items on the page and set the checkbox to true? What object do I loop through?

I've noticed the b-table component has a "computedItems" object which has the current view of items on the table. Any way to access this? — Speedy059

nardnob nardnob · Accepted Answer · 2018-10-25T16:18:17

Check out the v-model Binding section of the docs. The variable bound to the v-model prop will contain a shallow-copy of the displayed items. You could modify properties on this shallow copy and it would modify the items in your items array.

VueJS Bootstrap-Vue b-table - Checkbox all and current items?

1 Answers