I implemented a b-table along with b-pagination in my Vue template:
<b-table
bordered
hover
responsive
:items="items"
:fields="fields"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
sort-icon-left
:filter="searchFilter"
@filtered="onFiltered"
:filter-included-fields="filterOn"
:per-page="perPage"
:current-page="currentPage"
class="table1"
ref="table1"
selectable
@row-selected="selectedRow"
:tbody-tr-class="styleRow"
>
<template #cell(selected)="{ rowSelected }">
<template v-if="rowSelected">
<span class="sr-only">Selected</span>
</template>
<template v-else>
<span class="sr-only">Not selected</span>
</template>
</template>
</b-table>
<b-pagination
v-model="currentPage"
:total-rows="totalRows"
:per-page="perPage"
align="center"
limit="15"
></b-pagination>
I have set up functions in my Vue app to handle row selection by the user:
export default {
data() {
return {
items: [],
sortBy: 'build',
sortDesc: true,
searchFilter: '',
perPage: 11,
currentPage: 10,
totalRows: 1,
fields: [],
defaultFields: [],
fieldNames: [],
filterOn: [],
selectedInfo: { item: {}, value: {}, field: {} },
selected: [],
};
},
methods: {
styleRow(item) {
if (item.selected) {
return ['b-table-row-selected', 'table-secondary'];
}
return [];
},
selectedRow(items) {
this.selected = items;
}
},
};
The issue arises when the user selects rows on one page, navigates to another, and then returns to the initial page only to find the selections erased. How can I address this issue? Is there a way to retain selected rows across pagination?