Dynamic content in layout



  • I did some searching but can’t really find the solution which I am looking for (might not even be possible maybe):
    https://forum.quasar-framework.org/topic/171/could-you-change-the-layout-header-slot-from-a-child-component
    https://forum.quasar-framework.org/topic/2017/dynamic-left-drawer-to-pages

    I’d want to have a button in the toolbar in the main layout which dynamically changes content according to the page which is shown and triggers actions on the shown page. From the topics above I understand that I should define the menu for the whole app and show the right actions by using v-if. However, how does the layout interact with the component in that case?

    An example of the layout would be:

      <q-layout view="lHh Lpr lFf">
        <q-header
          elevated
          class="glossy"
        >
          <q-toolbar>
            <q-btn
              flat
              round
              dense
              icon="menu"
            >
              <q-menu>
                <q-list style="min-width: 100px">
    		<!-- Dynamic content -->  
                </q-list>
              </q-menu>
            </q-btn>
          </q-toolbar>
        </q-header>
    
        <q-page-container>
          <router-view />
        </q-page-container>
      </q-layout>
    


  • I found a solution in https://github.com/LinusBorg/portal-vue.

    yarn add portal-vue
    quasar new boot PortalVue

    boot/PortalVue.js:

    import PortalVue from 'portal-vue'
    
    export default async ({ Vue }) => {
      Vue.use(PortalVue)
    }
    

    In MyLayout.vue:

    <q-menu>
      <q-list style="min-width: 100px">
        <portal-target name="menu" />
      </q-list>
    </q-menu>
    

    In any component:

    <portal to="menu">
      <q-item
        v-close-menu
        clickable
      >
        <q-item-section>
          <div class="text-h6 text-truncate">
            Title
          </div>
          <div class="text-subtitle2">
            Subtitle
          </div>
        </q-item-section>
      </q-item>
    </portal>
    


  • I think you are most likely doing it wrong. Sorry to say so …

    You should change your data in turn the content will change. This is the key.
    Everything is “dynamic content”.

    And to access the data from any component you could use a global store like Vuex.

    However, how does the layout interact with the component in that case?

    You don’t interact with the component itself. You change the underlying data.


Log in to reply