src/components/FetchData.vue

@@ -28,6 +28,10 @@ const $props = defineProps({
         type: Number,
         default: 30,
     },
+    skip: {
+        type: Number,
+        default: 0,
+    },
     params: {
         type: Object,
         default: null,
@@ -38,18 +42,19 @@ const emit = defineEmits(['onFetch']);
 defineExpose({ fetch, paginate });
 
 const arrayData = useArrayData($props.url ?? $props.dataKey, {
+    autoLoad: $props.autoLoad,
     url: $props.url,
     filter: $props.filter,
     where: $props.where,
+    sortBy: $props.sortBy,
     limit: $props.limit,
-    order: $props.order,
-    userParams: $props.userParams,
-    exprBuilder: $props.exprBuilder,
+    params: $props.params,
 });
 const store = arrayData.store;
 
 const pagination = ref({
-    sortBy: $props.order,
+    sortBy: $props.sortBy,
+    skip: $props.skip,
     rowsPerPage: +$props.limit,
     page: 1,
     hasMoreData: true,
@@ -63,9 +68,11 @@ onMounted(async () => {
 
 async function paginate() {
     if (!pagination.value.hasMoreData) return emit('onFetch', []);
+    const skip = pagination.value.page * $props.limit;
+    pagination.value.skip = skip;
     await fetch(
         {
-            skip: pagination.value.page * $props.limit,
+            skip,
         },
         { append: true }
     );