Changing per page in remote mode makes two requests to the server.

[ctwillie]

Issue Type (delete the irrelevant ones)

• Bug

Specs

vue-good-table 2.21.8
VueJs 2.6.12
Browser: Version 88.0.4324.190 (Official Build) (64-bit)

Expected Behavior

When per page is changed, only one event is emitted and one request is made to the server.

Actual Behavior

When per page is changed, two requests are made to the server.

Steps to Reproduce the Problem

1. Use remote mode.
2. Change per page.
3. Watch two requests made.

This is from chrome network tab when per page was changed once.

Using a setup right from the docs. Nothing extra going on here. And no, I have absolutely no other listeners/handlers for the per page change event.

methods: {
...,
updateParams(newProps) {
      this.serverParams = Object.assign({}, this.serverParams, newProps);
  },
onPageChange(params) {
    this.updateParams({page: params.currentPage});
    this.loadItems();
},
onPerPageChange(params) {
    this.updateParams({perPage: params.currentPerPage});
    this.loadItems();
},
onSortChange(params) {
    this.updateParams({
        sort: [{
            type: params[0].type,
            field: params[0].field,
        }],
    });
    this.loadItems();
},
loadItems() {
    this.getFromServer(this.serverParams)
        .then(({ data }) => {
            this.totalRecords = data.totalRecords;
            this.rows = data.rows;
        });
},
getFromServer(serverParams) {
    let routeParams = {
        ...,
        ...serverParams,
    };
    return axios.get('https://acme.com', routeParams));
}
}

[ctwillie]

@xaksis I believe it is because when per page is changed, it is now changing page back to page 1. This emits two events. Thus, two requests are made. Hmmm....

This is the jsfiddle;

[TheJaredWilcurt]

#809 went in between 2.21.7 and 2.21.8. I assume that is the cause, also the rows per page keeps resetting to 10 for me, going from 2.21.7 to 2.21.8, and I think that may also be related.

• v2.21.7...v2.21.8

[hamzakifani]

try this solution

onPageChange ({ currentPage }) {
if (this.currentPage !== currentPage) {
this.currentPage = currentPage
this.__updateParams({ page: currentPage })
this.loadTransactions()
}
},
onPerPageChange ({ currentPerPage }) {
if (this.transactionTableRowCount !== currentPerPage) {
this.transactionTableRowCount = currentPerPage
this.__updateParams({ limit: currentPerPage, page: 1 })
this.loadTransactions()
}
},