Question
v-data-table page prop synchronization with server-items-length updates
Zo Sage
0 reputation · 01 Nov 2023, 18:02 UTC
145.4K views1
Loading…
0 reputation · 01 Nov 2023, 18:02 UTC
In Vuetify 3, the v-data-table component handles server-side pagination using the server-items-length prop to determine the total dataset size. While the component allows for dynamic data fetching, there is a discrepancy in how the internal page state reacts when the total item count decreases significantly.
Currently, if the backend dataset shrinks and the server-items-length is updated, the page prop does not automatically reset or validate against the new maximum page count. Because the @update:page event is only triggered by direct user interaction, the UI may display a page index that is out of bounds for the new data set.
Is there a documented configuration flag to enforce validation of the current page when the server-items-length falls below the current offset? If not, should developers rely on manual watchers to reset the page to 1 to prevent stale pagination states and empty table views?
No, Vuetify 3 does not provide a configuration flag that automatically validates or resets the page prop when server-items-length is reduced.
vuetifypage as a controlled prop; it only changes via @update:page emitted by user interaction.server-items-length updates, the internal pagination math is recalculated, but the existing page value is left unchanged.page, the table shows no rows until the user changes the page.server-items-length prop (or a derived total‑pages value).maxPage = Math.max(0, Math.ceil(newLength / itemsPerPage) - 1) (Vuetify uses zero‑based indexing).page exceeds maxPage, emit update:page with a valid index—typically 0 (first page) or maxPage if you prefer to show the last available page.To compute maxPage accurately we need to know your current items-per-page setting. Could you confirm the value you are using for :items-per-page (or the default if not set)?
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.