diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue index 14e3b6420..4dae312ce 100644 --- a/src/components/ui/VnPaginate.vue +++ b/src/components/ui/VnPaginate.vue @@ -78,7 +78,6 @@ const arrayData = useArrayData(props.dataKey, { exprBuilder: props.exprBuilder, }); const store = arrayData.store; -const hasMoreData = arrayData.hasMoreData; onMounted(() => { if (props.autoLoad) fetch(); @@ -97,7 +96,7 @@ const addFilter = async (filter, params) => { async function fetch() { await arrayData.fetch({ append: false }); - if (!hasMoreData.value) { + if (!store.hasMoreData) { isLoading.value = false; } emit('onFetch', store.data); @@ -110,8 +109,8 @@ async function paginate() { isLoading.value = true; await arrayData.loadMore(); - if (!hasMoreData.value) { - if (store.userParamsChanged) hasMoreData.value = true; + if (!store.hasMoreData) { + if (store.userParamsChanged) store.hasMoreData = true; store.userParamsChanged = false; endPagination(); return; @@ -140,7 +139,7 @@ async function onLoad(index, done) { await paginate(); let isDone = false; - if (store.userParamsChanged) isDone = !hasMoreData.value; + if (store.userParamsChanged) isDone = !store.hasMoreData; done(isDone); } @@ -185,7 +184,7 @@ defineExpose({ fetch, addFilter }); @load="onLoad" :offset="offset" class="full-width" - :disable="disableInfiniteScroll || !hasMoreData" + :disable="disableInfiniteScroll || !store.hasMoreData" v-bind="$attrs" > @@ -193,7 +192,10 @@ defineExpose({ fetch, addFilter }); -
+
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index 3b5f7bab5..490186e77 100644 --- a/src/composables/useArrayData.js +++ b/src/composables/useArrayData.js @@ -12,7 +12,6 @@ export function useArrayData(key, userOptions) { if (!arrayDataStore.get(key)) arrayDataStore.set(key); const store = arrayDataStore.get(key); - const hasMoreData = computed(() => arrayDataStore.hasMoreData); const route = useRoute(); let canceller = null; @@ -93,7 +92,7 @@ export function useArrayData(key, userOptions) { }); const { limit } = filter; - arrayDataStore.hasMoreData = limit && response.data.length >= limit; + store.hasMoreData = limit && response.data.length >= limit; if (append) { if (!store.data) store.data = []; @@ -165,7 +164,7 @@ export function useArrayData(key, userOptions) { } async function loadMore() { - if (!hasMoreData.value) return; + if (!store.hasMoreData) return; store.skip = store.limit * page.value; page.value += 1; @@ -207,7 +206,6 @@ export function useArrayData(key, userOptions) { destroy, loadMore, store, - hasMoreData, totalRows, updateStateParams, isLoading, diff --git a/test/vitest/__tests__/components/Paginate.spec.js b/test/vitest/__tests__/components/Paginate.spec.js index 98925204b..345903c1a 100644 --- a/test/vitest/__tests__/components/Paginate.spec.js +++ b/test/vitest/__tests__/components/Paginate.spec.js @@ -48,7 +48,7 @@ describe('VnPaginate', () => { { id: 3, name: 'Bruce Wayne' }, ], }); - vm.arrayData.hasMoreData.value = true; + vm.store.hasMoreData = true; await vm.$nextTick(); vm.store.data = [ @@ -59,13 +59,13 @@ describe('VnPaginate', () => { await vm.paginate(); - expect(vm.store.skip).toEqual(0); - expect(vm.store.data.length).toEqual(3); + expect(vm.store.skip).toEqual(3); + expect(vm.store.data.length).toEqual(6); await vm.paginate(); - expect(vm.store.skip).toEqual(0); - expect(vm.store.data.length).toEqual(3); + expect(vm.store.skip).toEqual(6); + expect(vm.store.data.length).toEqual(9); }); });