Help with QTable and server side pagination

[vinnyc]

Hi there, I’m missing something obvious but I can’t get the pagination to work. The results are rendered, but when I click on the arrows for next page. I can see that the method @request is invoked, but the pagination.pageNumber does not increase, the server side function is still receiving page 1.

      <q-table
        :title="$t('patient.record.title')"
        :data="patients"
        :columns="columns"
        :pagination.sync="pagination"
        @request="getPatients"
        row-key="_id"
        @row-click="selectRow"
        :loading="loading"
      >
data () {
    return {
      patients: [],
      loading: true,
      pagination: {
        sort: "asc",
        descending: false,
        page: 1,
        rowsPerPage: 25,
        rowsNumber: 100
      },
      columns: [
        {
          name: 'name',
          required: true,
          field: 'name',
          label: 'Nome',
          align: 'left',
          sortable: true
        },
        {
          name: 'city',
          required: true,
          field: 'city',
          label: 'Cidade',
          align: 'left',
          sortable: true
        },
        {
          name: 'birthdate',
          required: true,
          field: 'birthdate',
          label: 'Nascimento',
          align: 'left',
          sortable: true
        }

      ]
    }
  }
 getPatients () {
      service.listPatients({ query: {}, page: this.pagination.page, limit: this.pagination.rowsPerPage }).then(res => {
        this.pagination.rowsNumber = res.total
        this.pagination.page = res.page
        this.patients = res.items
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    }

What am I missing to increase the pagination.page value?

Thank you

[vinnyc]

I have updated to the latest 1.15.7 and the problem still persists. I put a breakpoint before the server side method is called for the sync and I can see that regardless of change on the pagination control (page, size) the pagination object remains immutable, hence the server is always fetching using the values set at the page creation.

Anyone else seeing this?

[vinnyc]

I found the culprit, but am not sure why, would be good if someone posts here the reason so others could benefit from this.

my getPatients method was using the pagination variable directly, the moment I changed it to use a version that wrapped it under a props object and not refer the pagination directly it worked again.

Not sure why is that, but at least its working now