src/components/VnTable/VnTable.vue

@@ -151,8 +151,8 @@ const tableModes = [
     },
 ];
 onBeforeMount(() => {
-    const urlParams = route.query[$props.searchUrl];
+    setUserParams(route.query[$props.searchUrl]);
-    hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
+    hasParams.value = params.value && Object.keys(params.value).length !== 0;
 });
 
 onMounted(() => {
@@ -185,8 +185,7 @@ watch(
 
 watch(
     () => route.query[$props.searchUrl],
-    (val) => setUserParams(val),
+    (val) => setUserParams(val)
-    { immediate: true, deep: true }
 );
 
 const isTableMode = computed(() => mode.value == TABLE_MODE);

src/pages/Account/AccountAcls.vue

@@ -9,8 +9,6 @@ import { useQuasar } from 'quasar';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import FetchData from 'src/components/FetchData.vue';
-import { useValidator } from 'src/composables/useValidator';
 
 defineProps({
     id: {
@@ -25,18 +23,11 @@ const stateStore = useStateStore();
 const quasar = useQuasar();
 
 const tableRef = ref();
-const roles = ref();
+
-const validationsStore = useValidator();
-const { models } = validationsStore;
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
-            return {
+            return { model: { like: `%${value}%` } };
-                or: [
-                    { model: { like: `%${value}%` } },
-                    { property: { like: `%${value}%` } },
-                ],
-            };
         default:
             return { [param]: value };
     }
@@ -56,13 +47,6 @@ const columns = computed(() => [
         label: t('model'),
         cardVisible: true,
         create: true,
-        columnCreate: {
-            label: t('model'),
-            component: 'select',
-            attrs: {
-                options: Object.keys(models),
-            },
-        },
     },
     {
         align: 'left',
@@ -71,10 +55,9 @@ const columns = computed(() => [
         cardVisible: true,
         component: 'select',
         attrs: {
-            options: roles,
+            url: 'VnRoles',
             optionLabel: 'name',
             optionValue: 'name',
-            inputDebounce: 0,
         },
         create: true,
     },
@@ -147,11 +130,6 @@ const deleteAcl = async ({ id }) => {
     />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
     </QDrawer>
-    <FetchData
-        url="VnRoles?fields=['name']"
-        auto-load
-        @on-fetch="(data) => (roles = data)"
-    />
     <VnTable
         ref="tableRef"
         data-key="AccountAcls"

src/pages/Account/AccountFilter.vue

@@ -33,7 +33,6 @@ const rolesOptions = ref([]);
         :search-button="true"
         :hidden-tags="['search']"
         :redirect="false"
-        search-url="table"
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">