Dynamic content in layout

[stefanvh]

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>

[stefanvh]

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>

[turigeza]

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.