0

Estoy trabajando en una aplicación de quasar(vue) que la estoy trabajando por modulos. introducir la descripción de la imagen aquí

estoy usando el MainLayout(el que esta en la raiz) en todos los modulos pero estoy teniendo problemas con el manejo del q-drawer con las pages dentro de los modulos(no se oculta el q-drawer) en el layout tengo una logica para ocultar o no el drawer

   <q-toolbar>
    <q-btn
      flat
      dense
      round
      icon="menu"
      aria-label="Menu"
      @click="toggleLeftDrawer"
    />
<q-drawer v-model="leftDrawerOpen" show-if-above>
  <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px">
    <q-list padding>
      <q-item-label header> Menú</q-item-label>

      <EssentialLink
        v-for="link in linksList"
        :key="link.title"
        v-bind="link"
      />
    </q-list>
  </q-scroll-area>
  <q-img
    alt="logo menu app"
    class="absolute-top q-mt-md"
    src="~assets/logo.svg"
    style="height: 140px"
  />
</q-drawer>

y en el script manejo una propiedad reactiva para ocultarlo

const leftDrawerOpen = ref<boolean>(false);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

en el index de la raiz funciona bien al presionar el boto se oculta introducir la descripción de la imagen aquí

el problema es con las pages que estan dentro de los modulos el drawer no se oculta introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

No logro encontrar el error en las rutas de los modulos estoy especificando que cargue el main layout

export default {
  name: 'customer',

  component: () => import('src/layouts/MainLayout.vue'),
  children: [
    {
      path: '',
      name: 'customer',
      component: () => import('modules/customer/pages/IndexPage.vue'),
    },
  ],
};

y en el router principal estoy agregando las rutas de los módulos

import { RouteRecordRaw } from 'vue-router';

    import customerRouter from 'src/modules/customer/router';
    
    const routes: RouteRecordRaw[] = [
    
      {
        path: '/',
        component: () => import('layouts/MainLayout.vue'),
        children: [
          {
            path: '',
            component: () => import('pages/IndexPage.vue'),
          },
          {
            path: '/customer',
            ...customerRouter,
          },
    
        ],
      },
    
      {
        path: '/:catchAll(.*)*',
        component: () => import('pages/ErrorNotFound.vue'),
      },
    ];
    
    export default routes;

Alguien sabe porque estoy teniendo este problema.

Revisando las vuetools veo que en las pages de los modulos no esta actualizando la propiedad para ocultarl el drawer leftDrawerOpen pero si se la cambio manual(se la cambio a false) desde la vuetools pasa lo siguiente introducir la descripción de la imagen aquí

7
  • ¿Podrías por favor adjuntar algún error que te salga en la consola de desarrollo del navegador? Ya que veo tu código bien definido y eso nos podría servir para tener alguna idea de lo que pasa. Commented el 29 abr. a las 17:26
  • No hay error en la consola Commented el 29 abr. a las 17:59
  • lo que si veo es que en las devtools no actualiza la propiedad que ocupo para ocultar el drawer leftDrawerOpen Commented el 29 abr. a las 18:02
  • @JonathanArias actualice la pregunta con lo que sucede Commented el 29 abr. a las 18:19
  • En el código veo que tienes dos veces el botón para hacer toggle al drawer ¿Por qué lo tienes dos veces? Adicional a eso, se me ocurre que quizá la ruta de los archivos en el router deba ser absoluta y no sé muy bien por qué pones el RouteRecordRaw. Commented el 29 abr. a las 18:27

1 respuesta 1

0

Encontre el error por si le sirve a alguien mas en el router principal saque las rutas de los módulos del children, ya que cada modulo tiene su propio children y le estoy definiendo el mismo layout al parecer lo asignaba 2 veces.

 const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/IndexPage.vue'),
      },
    ],
  },

  {
    path: '/customer',
    ...customerRouter,
  },

  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.