vue good table - 3 requests to the service

Question

I use vue-good-table object to render table in Vue.js. I use paging and sorting serverside.

My code:

     <vue-good-table v-if="authorizations"
                                    id="AuthorizationsTable"
                                    ref="refToAuthorizationsTable"
                                    @on-page-change="onPageChange"
                                    @on-sort-change="onSortChange"
                                    @on-column-filter="onColumnFilter"
                                    @on-per-page-change="onPerPageChange"
                                    mode="remote"
                                    :columns="columns"
                                    :rows="authorizations"
                                    :totalRows="totalRecords"
                                    :pagination-options="{
                                    enabled: true,
                                    mode: 'pages',
                                    nextLabel: 'następna',
                                    prevLabel: 'poprzednia',
                                    ofLabel: 'z',
                                    pageLabel: 'strona',
                                    rowsPerPageLabel: 'wierszy na stronie',
                                    allLabel: 'wszystko',
                                    dropdownAllowAll: false
                                    }"
                                    :sort-options="{
                                        enabled: true,
                                        initialSortBy: {
                                            field: 'id',
                                            type: 'asc'
                                        }
                                    }">


    (...)
export default {
        name: 'AuthoritiesAdministration',
        components: {},
        data() {
            return {
                totalRecords: 0,
                serverParams: {
                    columnFilters: {},
                    sort: {
                        field: 'id',
                        type: 'asc'
                    },
                    page: 1,
                    perPage: 10
                },
                rows: [],
                columns: [
                    {
                        label: 'ID',
                        field: 'id',
                        type: 'number',
                        tdClass: 'vue-good-table-col-100'
                    },
                    {
                        label: 'Data wystawienia',
                        field: 'issueDate',
                        formatFn: this.formatDate,
                        tdClass: 'vue-good-table-col-200',
                    },
                    {
                        label: 'Nazwa operatora',
                        field: 'operator',
                        sortable: true,
                        formatFn: this.formatOperatorName,
                    },
                    {
                        label: 'Login',
                        field: 'operator.login'
                    },
                    {
                        label: 'Spółka',
                        field: 'company.description',
                        type: 'text',
                    },
                    {
                        label: 'Data ważności',
                        field: 'endDate',
                        type: 'text',
                        formatFn: this.formatDate,
                    },
                    {
                        label: 'Akcje',
                        field: 'btn',
                        tdClass: 'vue-good-table-col-250',
                        sortable: false
                    }
                ],
            }
        },
(...)

     methods: {
        updateParams(newProps) {
            this.serverParams = Object.assign({}, this.serverParams, newProps);
        },
        onPageChange(params) {
            this.updateParams({page: params.currentPage});
            this.loadAuthorizations();
        },
        onPerPageChange(params) {
            this.updateParams({
                perPage: params.currentPerPage
            });
            this.loadAuthorizations();
        },
        onSortChange(params) {
            this.updateParams({
                sort: {
                    type: params[0].type,
                    field: params[0].field
                }
            });
            this.loadAuthorizations();
        },
        onColumnFilter(params) {
            this.updateParams(params);
            this.loadAuthorizations();
        },
        loadAuthorizations() {
            getAllAuthorizationsLightWithPagination(this.$store.getters.loggedUser.token, this.serverParams).then(response => {
                this.totalRecords = response.data.totalRecords;
                this.rows = response.data.authorizations;
            }).catch(err => {
                this.$showError(err, true);
            });
        },

I have noticed that there are sent 3 requests to the server instead of 1: there are called methods like onPageChange, onPerPageChange and onSortChange but only the first time when my page is loaded. It is unnecessary. I have one method in "mounted" section where I load the first 10 results (sorting and paging by default). It's common, well-known problem with vue-good-table? Or maybe should I add an additional flag to not to invoke these 3 methods unnecessarily when the page is loaded?

Answer 1

Your onSortChange method is called at the table loading because you made a initialSortBy with specific values. To remove this calling juste remove

initialSortBy: {
  field: 'id',
  type: 'asc'
}

from you table configuration, but your sort will not be set, so I think this should be a legit function call.

The onPerPageChange and onPageChange are triggered by the config below

:pagination-options="{
  enabled: true,
  ...
}

just remove the colon before pagination-options to have a config like this

pagination-options="{
  enabled: true,
  ...
}