Dynamic tabs setup

  • Hi guys, i’m using quasar 0.17 trying to load the tabs for my layout dynamically from file. Something like this:
    <q-layout view=“lHh Lpr lFf”>

    <q-tabs v-model=“selTabMdl”>
    <q-route-tab v-for="(bTab, bTIndex) in _getTabsMdl()" :to=“bTab.to” :label=“bTab.name” :key=“bTIndex” slot=“title” />

    import { getTabsMdl } from ‘./myTabsModel’

    export default {

    methods: {
    _getTabsMdl () {
    return getTabsMdl()
    // return [{name: ‘tt1’, to: ‘/’}, {name: ‘tt2’, to: ‘/’}, {name: ‘tt3’, to: ‘/’}]

    When i call the function getTabsMdl() from the file myTabsMdl.js the tabs show up, but there is no default tab selected. Since i return the array (the commented code) everything is fine and the default tab is selected 😮 Can someone give me an advice, what should i do to get it work?

    Thanx in advance!

  • Can you make a fiddle please? https://jsfiddle.net/rstoenescu/waugrryy/

    Also here in the forum, use three backticks “```” before and after your code to format it.


  • Sure, here is the fiddle: https://jsfiddle.net/Oggzter/4t39h7fg/5/
    I have no idea how to make the import in the fiddle, but i hope the use case is clear. As soon as i return the array, it works fine. When i use the imported function “getTabsMdl” the tabs are shown, but no tab is selected 😕

  • Just create your function above “new Vue”.


  • @Oggo
    https://codesandbox.io/s/31r3kllmq1, try forking this. maybe show whats inside myTabsModel and your router / routes too.

  • Thanx guys,
    @metalsadman hmmmm it seems to work in your sample, so i will have to drill deeper to find my error. Thanx a lot for the sample!


Log in to reply