Vuetify: [Bug Report] Data Table unnecessary pagination watch trigger

[eolant]

Versions and Environment

Vuetify: 1.0.8
Vue: 2.5.7
Browsers: Chrome 64.0.3282.167
OS: Mac OS 10.11.3

Steps to reproduce

Slightly modified template
When using with server side data totalItems can often change which causes update of the property in pagination object which triggers watch handler and creates unnecessary API call that returns exactly the same data.

Expected Behavior

totalItems shouldn't be in pagination object. There should be only one API call that returns relevant data.

Actual Behavior

Unnecessary watch trigger that creates API call that returns the same data.

Reproduction Link

https://codepen.io/anon/pen/wmWmZy

Other comments

Issue wasn't present in beta 6 as pagination.totalItems was always 0. In version 1.0.8 it updates when you assign new set of items to it which in return also causes watch handler to trigger.

[ljyf5593]

I trigger this bug too

[isimonov]

I acknowledge the error. totalItems should not be in the pagination object. Otherwise, why do we pass a special property totalItems (: total-items = "totalItems") in the v-data-table component? In the pagination object, the totalItems property is not used and is not needed.

[canhkieu]

Got the same problem. Back to 1.0.0-beta.6 is OK.

[nekosaur]

There definitely was a reason for having totalItems in pagination (parallel to totalItems prop). I'm not totally sure if there still is. But it might not be as easy as just removing it.

[canhkieu]

totalItems shouldn't be in pagination object
I think totalItems is not necessary (in pagination). We alway have total (records) from server-side.

[eolant]

@nekosaur I've searched the repo code for totalItems and the only place it's used is in mixins/data-iterable.js and the only function of this property is to be inited and updated.
In beta.6 it was updated on search watch instead of current itemsLength watch handler. That's why if search weren't used it was always 0 and didn't cause any problems.
If the only purpose of the property is to exist and cause unnecessary load on the server and client or make it painful to create watch on pagination object I think it's safe to remove it :)

[canhkieu]

 computed: {
    params() {
      return {
        page: this.pagination.page || null,
        limit: this.pagination.rowsPerPage || null,
        sort: this.pagination.sortBy || null,
        order: this.pagination.descending || null,
      };
    }
  },
  watch: {
    params(val, oldVal) {
      if (JSON.stringify(val) !== JSON.stringify(oldVal)) this.fetchData(val);
  }

Temporary fix

[eolant]

@canhkieu I would rather just go back to older version since doing this for 10 or more components would be painful :D

[canhkieu]

@eolant really painful. Backed to older version.

[eolant]

I actually have tried to fix it myself by deleting totalItems from pagination object. It doesn't break anything nor fixes the issue as calls made 2 times anyway with the identical properties in the Object. Unfortunately I don't have much time to investigate it further.

[isimonov]

Any such attempt to correct current behavior will be unnatural and cumbersome. In my opinion, this problem should be solved by developers in the code of the Data Table component itself.

[canhkieu]

Waiting for @nekosaur solution in v1.0.14 . ^_^

[nekosaur]

1.1 will include a workaround fix for this. By using new prop disable-page-reset there should be no more doubled updates to pagination object.

[canhkieu]

It's still not fix. I tried but not thing change. It's still duplicate request at first time

Version: 1.0.18

<v-data-table :headers="headers" :items="items.data" :pagination.sync="pagination" :total-items="items.total">

add :disable-page-reset="true" or not is not fix this issue

First request

descending:false
page:1
rowsPerPage:10
sortBy:name
totalItems:0

Second request

descending:false
page:1
rowsPerPage:10
sortBy:name
totalItems:32

[canhkieu]

Update to 1.1.0-alpha.4 so terrible. It's 3 times requests

[isimonov]

There are questions to the component Data Table, the proposed solutions are somewhat like crutches, still not working, unfortunately...

[nekosaur]

PR is still open. Will hopefully make it into 1.1

[jordandc1]

Fixed?

[nekosaur]

In v1.1.0-alpha.6

[dballardgh]

Confirmed fixed for me in v1.1.0-alpha.6. No need to specify :disable-page-reset="true".

[fontenele]

i was binding :total-items="pagination.totalItems"
then when getting results i was setting this.pagination.totalItems so it makes two requests.

to fix I created the totalItems at return of data()
then bindind :total-items="totalItems"
then when getting results this.totalItems = res.total

"DO NOT" SET TOTAL ITEMS DIRECTLY AT PAGINATION OBJ