src/components/ui/VnPaginate.vue

@@ -78,6 +78,7 @@ const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
 });
 const store = arrayData.store;
+const hasMoreData = arrayData.hasMoreData;
 
 onMounted(() => {
     if (props.autoLoad) fetch();
@@ -96,7 +97,7 @@ const addFilter = async (filter, params) => {
 
 async function fetch() {
     await arrayData.fetch({ append: false });
-    if (!arrayData.hasMoreData.value) {
+    if (!hasMoreData.value) {
         isLoading.value = false;
     }
     emit('onFetch', store.data);
@@ -109,8 +110,8 @@ async function paginate() {
 
     isLoading.value = true;
     await arrayData.loadMore();
-    if (!arrayData.hasMoreData.value) {
-        if (store.userParamsChanged) arrayData.hasMoreData.value = true;
+    if (!hasMoreData.value) {
+        if (store.userParamsChanged) hasMoreData.value = true;
         store.userParamsChanged = false;
         endPagination();
         return;
@@ -131,9 +132,7 @@ function endPagination() {
     emit('onPaginate');
 }
 async function onLoad(index, done) {
-    if (!store.data) {
-        return done();
-    }
+    if (!store.data) return done();
 
     if (store.data.length === 0 || !props.url) return done(false);
 
@@ -141,7 +140,7 @@ async function onLoad(index, done) {
 
     await paginate();
     let isDone = false;
-    if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
+    if (store.userParamsChanged) isDone = !hasMoreData.value;
     done(isDone);
 }
 
@@ -181,13 +180,12 @@ defineExpose({ fetch, addFilter });
             </QCard>
         </div>
     </div>
-
     <QInfiniteScroll
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        :disable="disableInfiniteScroll || !arrayData.hasMoreData.value"
         class="full-width"
+        :disable="disableInfiniteScroll || !hasMoreData"
         v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>
@@ -195,10 +193,7 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div
-        v-if="!isLoading && arrayData.hasMoreData.value"
-        class="w-full flex justify-center q-mt-md"
-    >
+    <div v-if="!isLoading && 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

@@ -14,7 +14,7 @@ export function useArrayData(key, userOptions) {
     }
 
     const store = arrayDataStore.get(key);
-    const hasMoreData = ref(false);
+    const hasMoreData = computed(() => arrayDataStore.hasMoreData);
     const route = useRoute();
     let canceller = null;
 
@@ -96,7 +96,7 @@ export function useArrayData(key, userOptions) {
         });
 
         const { limit } = filter;
-        hasMoreData.value = limit && response.data.length >= limit;
+        arrayDataStore.hasMoreData = limit && response.data.length >= limit;
 
         if (append) {
             if (!store.data) store.data = [];