Could you change the Layout header slot from a child component?



  • Ok so this is something I have been thinking these past few days. Could you update a slot of the parent from inside a child?
    In my case I use the Quasar Layout component (as you should) and in one of my routes, I need to change the whole template of the slot. My route is something like this:

    {
          path: '',
          meta: {
            auth: true
          },
          component: load('Index'),
          children: [
            {
              path: '/',
              component: load('Modules')
            },
            {
              name: 'environment',
              path: 'environment/:id',
              component: load('Environment')
            }
          ]
        }
    

    My index`s header slot is:

     <div slot="header" class="toolbar">
          <button class="left-drawer-opener" @click="$refs.leftDrawer.open()">
            <i>menu</i>
          </button>
          <q-toolbar-title :padding="1">
            <div class="text-center">
              EpicTitleHere
            </div>
          </q-toolbar-title>
        </div>
    

    But my Environment’s header will need to have allot more than the title that is currently in it.


  • Admin

    Hi,

    Uh, there is so much to explain here. I’ll try to be short and to the point. Use a store or vuex to manage the state of the layout. Then, when you visit a certain route simply change the state. This way the layout will know what to display in the header.



  • Pretty much i was thinking of the same thing. vue-router-vuex sync could be used for this, to know on which route I am and stuff.



  • I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?



  • @Martin said in Could you change the Layout header slot from a child component?:

    I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?

    I posted a workaround for this here:
    http://forum.quasar-framework.org/topic/783/nested-q-layout-behavior-0-13-vs-0-14-again/2


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.