VueJs + BootstrapVue: Table delete items only on first page

Question

I created a page where I list all my items in a BootstrapVue b-table. for each item, I added the possibility to delete the item.

When I activate pagination with b-pagination element and :per-page attribute, I have an unexpected behavior on the page. The problem is it works only for the 1st page, but all others pages get the data of the 1st page. For example, if the total item is 10 and I'm displaying 5 items per page, the second page displaying the next 5 items will still try to delete the first page items.

<b-table
  id="traffic-routes"
  :fields="fieldsForTrafficRoutes"
  :items="itemsForTrafficRoutes"
  :per-page="perPageForTrafficRoutes"
  :current-page="currentPageForTrafficRoutes"
>
    <template v-slot:cell(action)="data">
      <div class="d-flex align-items-center justify-content-end">
        <a class="action-icon mr-2"
          @click="removeRow(data.index)"
        > Delete </a>
     </div>
   </template>  

</b-table>

<b-pagination
  v-model="currentPageForTrafficRoutes"
  aria-controls="traffic-routes"
  align="right"
  :total-rows="
  itemsForTrafficRoutes ? itemsForTrafficRoutes.length : 0"
  :per-page="perPageForTrafficRoutes"
></b-pagination>


export default {
  data() {
    return {
      perPageForTrafficRoutes: 5,
      currentPageForTrafficRoutes: 1,
      // ...
    }
  },
  computed: {
    ...mapGetters([
      'getAllTrafficRoutes',
    ]),
    itemsForTrafficRoutes() {
      return JSON.parse(JSON.stringify(this.getAllTrafficRoutes));
    },
  }
}

However, I tried to make the items dynamic:

itemsForTrafficRoutes() {
  const foo = JSON.parse(JSON.stringify(this.getAllTrafficRoutes));
  return foo.slice((this.currentPageForTrafficRoutes - 1) *
    this.perPageForTrafficRoutes, this.currentPageForTrafficRoutes * this.perPageForTrafficRoutes
  );
},

This will make the items unique for each page, it will only contain the first 5 on the first and then update to the next 5 items on the next page, however, the table only displays the first page and is empty on the next page even though the items are present

Hiws · Accepted Answer · 2021-07-03 23:06:05Z

3

That's because you're using the index from the scoped slot. The index will be based the displayed rows, and not the actual index of the item in the array provided to the items prop.

This is described on the docs down in the notes under the Scoped field slots section.

index will not always be the actual row's index number, as it is computed after filtering, sorting and pagination have been applied to the original table data. The index value will refer to the displayed row number. This number will align with the indexes from the optional v-model bound variable.

I would suggest either using a unique identifier from your object if you have one, or using the reference to remove it.

answered Jul 3, 2021 at 23:06

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

VueJs + BootstrapVue: Table delete items only on first page

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