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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 14
Comments: 21 (11 by maintainers)

Commits related to this issue

fix: data-table issues reverts e57229d09e33a920575f0fdaa3c4b2edff513d4f to fix #3766 adds $nextTick to fix #3511 emits modified pagination object to fix #3585 closes #3766, closes #3585 — committed to vuetifyjs/vuetify by nekosaur 6 years ago
fix: data-table issues reverts e57229d09e33a920575f0fdaa3c4b2edff513d4f to fix #3766 adds $nextTick to fix #3511 emits modified pagination object to fix #3585 closes #3766, closes #3585 — committed to vuetifyjs/vuetify by nekosaur 6 years ago
fix: data-table issues reverts e57229d09e33a920575f0fdaa3c4b2edff513d4f to fix #3766 adds $nextTick to fix #3511 emits modified pagination object to fix #3585 closes #3766, closes #3585 — committed to vuetifyjs/vuetify by nekosaur 6 years ago
fix: data-table issues (#3857) * fix: data-table issues reverts e57229d09e33a920575f0fdaa3c4b2edff513d4f to fix #3766 adds $nextTick to fix #3511 emits modified pagination object to fix #3585 ... — committed to vuetifyjs/vuetify by nekosaur 6 years ago

Most upvoted comments

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.

nekosaur on Apr 15, 2018

In v1.1.0-alpha.6

nekosaur on May 21, 2018

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

eolant on Mar 24, 2018

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

kieuminhcanh on May 16, 2018

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

kieuminhcanh on Apr 6, 2018

@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 😃

eolant on Mar 21, 2018