Vuetify: [Bug Report] Changing the sort order on v-data-table triggers API call twice

[stnever]

Versions and Environment

Vuetify: 1.5.8
Vue: 2.6.10
Browsers: Chrome 72.0.3626.121
OS: Linux x86_64

Steps to reproduce

This is the demo code from the v-data-table server-side pagination example (taken directly from https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side). The only difference is a console.log on the getDataFromApi() method.

1. Turn on the console view on codepen
2. Navigate to second page of results. This causes one "getting data" message to be logged, because the pagination.page property changed from 1 to 2.
3. Click on the "Carbs" column header. This causes two "getting data" messages to be logged: the first changes the pagination.sortBy property from the default "calories" to "carbs", and the second one changes the pagination.page property from 2 back to 1.

Expected Behavior

The (fake) API call should be triggered only once. (Note that changing the page from 2 to 1 when the sort order is changed IS correct in my opinion; but it should not trigger two API calls, because the first one will be completely overwritten by the second)

Actual Behavior

The (fake) API call is triggered twice.

Reproduction Link

https://codepen.io/anon/pen/NmPXjK?editors=1011

Other comments

I suppose one way to do it would be to listen for changes only on the pagination.page property (instead of the whole object). This solves the problem above but creates another: if you stay on page 1, and just change the sort order, that listener would not be called and the API call would not get triggered.

[jacoahmad]

This is due to our docs calls getDataFromApi on mounted while watching pagination that does invoke the same function on pagination change. Removing getDataFromApi inside mounted will fix your issue.

Example

https://codepen.io/jacoahmadp/pen/xebvQY?editors=1011

[stnever]

Thanks for your reply!

Unfortunately, it is still happening in your updated pen. I understand that the mounted() hook might end up triggering the fetch twice, but the issue happens regardless.

(I'm now using the default Chrome devtools console -- sometimes the Codepen "console window" doesn't get updates).

1. Turn on Devtools on your updated pen, then refresh (F12+F5). The console correctly shows only one "getting data" message from the first pagination update. (line 1 on screenshot below)
2. Navigate to the second page (clicking the "next page" chevron). The console correctly logs one more "getting data" message. (line 2 on screenshot below)
3. Click on the "Carbs" column header. The console now shows two MORE "getting data" messages (lines 3 and 4 on screenshot below).

Looking at https://github.com/vuetifyjs/vuetify/blob/0a5aa74c55b0c356c13147ad63759aada3d29569/packages/vuetify/src/mixins/data-iterable.js#L306

The sort(index) method calls updatePagination(), which logs line 3 above (changing the .sortBy property), but this also triggers the watch: 'computedPagination.sortBy' listener, which calls resetPagination(), which logs line 4 above (changing the .page property).

Maybe the sort() method should change both the sortBy/dir and the page number in one go? E.g. line 309 should be this.updatePagination({ sortBy: index, descending: false, page: 1}) ?

[nekosaur]

This should be fixed in the 2.0 alpha, if anyone wants to check it out.

[jlowgren]

I'm also having this issue. Will 1.5 be patched as well?

[nekosaur]

There are no plans to fix this in 1.5