I'm currently struggling with setting the page of a data table externally before the table data is loaded. In my application the data table page either comes from the URL or the local storage. In theory as soon as the component is created I know on which page of the table the user should end up on.
But setting the page immediately will be of no use because after the data of the table is loaded the table page is set back to 1 again. But since I usually use a computed property for keeping the table data I simply wait for changes on this and update the table page afterwards. Unfortunately this doesn't work if there is a lot of data or the data structure is more complicated the rendering takes a bit longer so my update is coming in too early.
I couldn't find any hints in the docs that this is not supported and created a github issue since it seems like a bug to me, at least judging by some contradictory data in the dev tools.
I also tried to recreate the scenario in a codepen, obviously in this case one could just wait until "loadData" is done but as I said for my application the slight delay between getting the data and it showing up in the table seems to be the issue but leads to the same result in the end.
I tried the same with the options property but couldn't see any notable difference:
:options.sync="myOptions"
Do you guys have any recommendations on how to handle this? Either any way of keeping the page after the data changes or any reliable way to update the page after the table is populated and rendered? I feel like I tried most events of the table but had no luck yet.
Thanks in advance! :)
This really seems to be a bug in vuetify. When the items are updated the page gets reset to 1 but only inside the component. The page prop never reflects that change.
A workaround would be to trigger a change of the page variable on our side. So in your example I put the following at the end of the loadData method.
const p = this.page
this.page = 1
this.$nextTick(() => {
this.page = p
})
This puts the page prop back in sync with the component and it seems like the correct page is loaded immediately, at least inside the codepen.