fix: hasMoreData

src/components/ui/VnPaginate.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -77,7 +77,7 @@ const arrayData = useArrayData(props.dataKey, {
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
 });
-const hasMoreData = ref();
+const hasMoreData = computed(() => arrayData.hasMoreData);
 const store = arrayData.store;
 
 onMounted(() => {
@@ -97,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);
@@ -110,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;
@@ -142,7 +142,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);
 }
 
@@ -182,12 +182,12 @@ defineExpose({ fetch, addFilter });
             </QCard>
         </div>
     </div>
-    
+
     <QInfiniteScroll
         v-if="store.data"
         @load="onLoad"
         :offset="offset"
-        :disable="disableInfiniteScroll || !arrayData.hasMoreData"
+        :disable="disableInfiniteScroll || !hasMoreData.value"
         class="full-width"
         v-bind="$attrs"
     >
@@ -196,7 +196,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 && hasMoreData.value"
+        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

@@ -97,7 +97,6 @@ export function useArrayData(key, userOptions) {
 
         const { limit } = filter;
         hasMoreData.value = limit && response.data.length >= limit;
-        store.hasMoreData = hasMoreData.value;
 
         if (append) {
             if (!store.data) store.data = [];
@@ -169,7 +168,7 @@ export function useArrayData(key, userOptions) {
     }
 
     async function loadMore() {
-        if (!hasMoreData.value && !store.hasMoreData) return;
+        if (!hasMoreData.value) return;
 
         store.skip = store.limit * page.value;
         page.value += 1;