perf: use FetchData instead VnPAginate

src/pages/Customer/Card/CustomerAddress.vue

@@ -2,7 +2,7 @@
 import { onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import FetchData from 'components/FetchData.vue';
 
 import axios from 'axios';
 
@@ -53,7 +53,6 @@ const addressFilter = {
 
 onBeforeMount(() => {
     const { id } = route.params;
-    // getAddressesData(id);
     getClientData(id);
 });
 
@@ -61,14 +60,9 @@ watch(
     () => route.params.id,
     (newValue) => {
         if (!newValue) return;
-        // getAddressesData(newValue);
         getClientData(newValue);
     }
 );
-async function onFetch(data) {
-    addresses.value = data;
-    sortAddresses();
-}
 
 const getClientData = async (id) => {
     try {
@@ -94,9 +88,9 @@ const setDefault = (address) => {
     });
 };
 
-const sortAddresses = () => {
+const sortAddresses = (data) => {
-    if (!client.value || !addresses.value) return;
+    if (!client.value || !data) return;
-    addresses.value = addresses.value.sort((a, b) => {
+    addresses.value = data.sort((a, b) => {
         return isDefaultAddress(b) - isDefaultAddress(a);
     });
 };
@@ -117,17 +111,17 @@ const toCustomerAddressEdit = (addressId) => {
 </script>
 
 <template>
-    <div class="full-width flex justify-center">
+    <FetchData
-        <QCard class="card-width q-pa-lg">
+        @on-fetch="sortAddresses"
-            <VnPaginate
-                @on-fetch="onFetch"
         auto-load
         data-key="CustomerAddresses"
         order="id DESC"
         ref="vnPaginateRef"
         :filter="addressFilter"
         :url="`Clients/${route.params.id}/addresses`"
-            ></VnPaginate>
+    />
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
             <QCardSection>
                 <div
                     v-for="(item, index) in addresses"