useFetchData composable

src/components/FetchData.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onMounted } from 'vue';
 import axios from 'axios';
+import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     autoLoad: {
@@ -38,7 +39,7 @@ defineExpose({ fetch });
 
 onMounted(async () => {
     if ($props.autoLoad) {
-        await fetch();
+        await useFetchData(...$props).fetch();
     }
 });
 

src/components/common/VnSelect.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { ref, toRefs, computed, watch } from 'vue';
+import { ref, toRefs, computed, watch, h } from 'vue';
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useArrayData } from 'src/composables/useArrayData';
+import { useFetchData } from 'src/composables/useFetchData';
 
 const $props = defineProps({
     modelValue: {
@@ -66,11 +67,29 @@ const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
 const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
-// const myOptionsFiltered = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
-const dataRef = ref();
-
+const dataRef = ref(
+    useFetchData({
+        url: $props.url,
+        where: $props.where,
+        limit: $props.limit,
+        sortBy: $props.sortBy,
+        fields: $props.fields,
+    })
+);
+// const fetchDataComponent = ref(null);
+// fetchDataComponent.value = h(FetchData, {
+//     url: $props.url,
+//     where: $props.where,
+//     limit: $props.limit,
+//     sortBy: $props.sortBy,
+//     fields: $props.fields,
+//     onFetch: (data) => {
+//         setOptions(data); // Tu función para manejar los datos
+//     },
+// });
+//   const dataRef = ref(null);
 const selectValue = computed({
     get() {
         return $props.modelValue;
@@ -193,6 +212,8 @@ async function onScroll(scrollEv) {
 </script>
 
 <template>
+    <!-- <component :is="fetchDataComponent" ref="fetchDataRef" />
+
     <FetchData
         v-if="useURL"
         ref="dataRef"
@@ -202,7 +223,7 @@ async function onScroll(scrollEv) {
         :limit="limit"
         :sort-by="sortBy"
         :fields="fields"
-    />
+    /> -->
     <QSelect
         :loading="isLoading"
         @virtual-scroll="onScroll"

src/composables/useFetchData.js

@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+import axios from 'axios';
+
+export function useFetchData(props) {
+    const data = ref(null);
+
+    async function fetch(fetchFilter = {}) {
+        try {
+            const filter = Object.assign(fetchFilter, props.filter);
+            if (props.where && !fetchFilter.where) filter.where = props.where;
+            if (props.sortBy) filter.order = props.sortBy;
+            if (props.limit) filter.limit = props.limit;
+
+            const response = await axios.get(props.url, {
+                params: { filter: JSON.stringify(filter), ...props.params },
+            });
+
+            data.value = response.data;
+            return response.data;
+        } catch (e) {
+            // Manejo de errores
+            console.error(e);
+        }
+    }
+
+    return {
+        data,
+        fetch,
+    };
+}