refs #6772: use onBeforeRouteUpdate

src/components/ui/VnPaginate.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { onMounted, ref, watch, computed } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
-import { useRoute } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 const route = useRoute();
 
 const { t } = useI18n();
@@ -92,13 +92,13 @@ watch(
         store.data = props.data;
     }
 );
-watch(
-    () => route.params.id,
-    () => {
-        arrayData.reloadRoute();
+onBeforeRouteUpdate((to, from, next) => {
+    if (to.params.id !== from.params.id) {
+        arrayData.reloadRoute(to.params.id);
         fetch();
     }
-);
+    next();
+});
 const addFilter = async (filter, params) => {
     await arrayData.addFilter({ filter, params });
 };
@@ -190,7 +190,7 @@ defineExpose({ fetch, addFilter });
             </QCard>
         </div>
     </div>
-    
+
     <QInfiniteScroll
         v-if="store.data"
         @load="onLoad"

src/components/ui/VnSearchbar.vue

@@ -131,13 +131,6 @@ async function search() {
                 />
             </template>
             <template #append>
-                <QIcon
-                    v-if="searchText !== ''"
-                    name="close"
-                    @click="searchText = ''"
-                    class="cursor-pointer"
-                />
-
                 <QIcon
                     v-if="props.info && $q.screen.gt.xs"
                     name="info"

src/composables/useArrayData.js

@@ -33,19 +33,19 @@ export function useArrayData(key, userOptions) {
         setOptions();
     }
 
-    function reloadRoute() {
+    function reloadRoute(newId = route.params.id) {
         if (route.path === store.url) return;
         //Así fuerzo al reinicio
         store.data = null;
         if (!store?.filter?.where) {
             //Cuando el cambio viene por VnSearchbar
-            if (route.params.id) store.url = store.url.replace(/(\d+)/, route.params.id);
+            if (newId) store.url = store.url.replace(/(\d+)/, newId);
             return;
         }
         // Cuando el usuario cambia en la URL
         const keyFk = Object.keys(store.filter.where).find((key) => key.endsWith('Fk'));
         if (keyFk) {
-            store.filter.where[keyFk] = route.params.id;
+            store.filter.where[keyFk] = newId;
         }
     }