How to dynamically change per-page value ?

[bellissi1u]

Hey everybody !

I've got an issue right now, maybe i'm just missing something but idk. I try to had a b-form-select (from bootstrap vue) to change the number of elements to display in the table. So this use Vue's v-model to change a data attribute named "perPage" and so I pass it to the vuetable component, as "per-page" value. But it doesn't seem to change dynamically, so I'm asking here : is there a way to do that ? Maybe an event ? Or another option ?

Thanks a lot, beautiful component by the way :)

[ratiw]

@bellissi1u It is possible and I've demonstrate in here. You may have to watch for the change and refresh the table, like here

[bellissi1u]

@ratiw Thanks a lot for the answer. Actually, I used events like you did in the tutorial for the search bar component. I put the dropdown with a validation button, and on click it fires an event which is captured by the table component, and performs a refresh. That work pretty well so I'll keep it.

[Qvatra]

hello @bellissi1u , when I am on 2nd page of pagination and use the following:

      onItemsPerPage (itemsPerPageValue) {
        this.perPage = itemsPerPageValue
        Vue.nextTick(() => this.$refs.vuetable.refresh())
      },

table sends 2 requests:

1. request with new amount per page for a page 2 (due to perPage binding wih table)
2. request with new amount per page for page 1 (due to refresh())

now the problem is in race condition - if second request returns first than pagination-data event sets page first to #1 and then to # 2 which is obviously wrong.

any ideas how to fix that?

[acanthis]

table sends 2 requests:

did you manage to solve this problem?

[AlexRez27]

Had the same problem. The solution is to replace code in perPage watcher to this: perPage(val, oldVal) { this.$refs.vuetable.currentPage = 1 }, AS I understood. when you change perPage value, vuetable sends a request by default. And if you add watcher with refresh function, it sends the extra request. So the solution is not to send an extra request, but to fix the default one. If you look at the network panel, you'll see that there are some query params. We need param Page, and for some reason, when you change perPage the query param (page) doesn't change, so we need to change it manually.