[Solved] Mount child component to QTabPane only once.

[kiril4913]

I use QTab and I want to render my custom component (route-collapsible-list ) into one of my QTabPanes. It renders my component but I faced to issue that it rerenders it every time when I open the tab. In my case there are a lot of calculations in the mount of my component and it has to recalculate every time so component renders with a little delay, but I don’t need this. My model loads only once at the start and there is no changes after.

Is there any way to force QTab call mount only one time and use the already mounted component and not to remount it?

<q-tabs id="qTabsLeftDrawer" v-model="qTabsLeftDrawerSelectedTab" color="transparent" >
  <q-tab name="news" color="faded" slot="title" icon="announcement" label = "Announcements" alert count="3"/>
  <q-tab name="allRoutes" color="faded" slot="title" icon="swap_calls" label = "Routes"/>
>

      <q-tab-pane name="allRoutes">
        <route-collapsible-list></route-collapsible-list>
      </q-tab-pane>

      <q-tab-pane name="news" style="border-top: 2px groove #f5f2f28a; border-bottom: 0px;">
        <q-list
          no-border
          link
          inset-delimiter
          separator
        >
        <q-item @click.native="showBelkomtransModal">
          <q-item-side icon="info" />
          <q-item-main label="MSG" label-lines="1"/>
        </q-item>
      </q-list>
      </q-tab-pane>

      <q-tab-pane name="logs">
      </q-tab-pane>
</q-tabs>

[genyded]

Use Vue dynamic components with keep-alive.

[kiril4913]

Great! Thank you very much. This is it!