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"
     >
         <slot name="body" :rows="store.data"></slot>
@@ -193,7 +192,10 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div v-if="!isLoading && hasMoreData" class="w-full flex justify-center q-mt-md">
+    <div
+        v-if="!isLoading && store.hasMoreData"
+        class="w-full flex justify-center q-mt-md"
+    >
         <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
     </div>
 </template>

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,

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);
         });
     });