Fix server-side pagination returning same data on every page
v-data-table-server re-emits update:options when items/totalCount change, creating a loop that resets to page 1. Guard against redundant fetches by skipping when page and pageSize haven't changed. Remove duplicate loadTransactions from onMounted since the table's initial update:options event handles the first load. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -263,10 +263,12 @@ onMounted(async () => {
|
|||||||
const acct = accountsStore.accounts.find(a => a.id === props.id)
|
const acct = accountsStore.accounts.find(a => a.id === props.id)
|
||||||
accountName.value = acct?.name || ''
|
accountName.value = acct?.name || ''
|
||||||
}
|
}
|
||||||
await loadTransactions()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(() => props.id, () => loadTransactions())
|
watch(() => props.id, () => {
|
||||||
|
page.value = 1
|
||||||
|
loadTransactions()
|
||||||
|
})
|
||||||
|
|
||||||
async function loadCategories() {
|
async function loadCategories() {
|
||||||
try {
|
try {
|
||||||
@@ -305,7 +307,10 @@ function doSearch() {
|
|||||||
loadTransactions()
|
loadTransactions()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let initialized = false
|
||||||
function onTableOptions(options: { page: number; itemsPerPage: number }) {
|
function onTableOptions(options: { page: number; itemsPerPage: number }) {
|
||||||
|
if (initialized && options.page === page.value && options.itemsPerPage === itemsPerPage.value) return
|
||||||
|
initialized = true
|
||||||
page.value = options.page
|
page.value = options.page
|
||||||
itemsPerPage.value = options.itemsPerPage
|
itemsPerPage.value = options.itemsPerPage
|
||||||
loadTransactions()
|
loadTransactions()
|
||||||
|
|||||||
Reference in New Issue
Block a user