q-tab-panels with dynamic component content

  • I’m trying to build a tabbed interface with tab panels dynamically populated with components. Currently just plugging in components as canned data, but eventually hope to get them from the store.

    But it’s not working - I see the tabs, but no content and no error messages. Here’s the code:

        <q-tabs v-model="selectedTab">
          <q-tab v-for="tab in tabs" :key="tab.name"
        <q-tab-panels keep-alive v-model="selectedTab">
            v-for="tab in tabs" :key="tab.name" :name="tab.name"
            <component :is="tab.componentName"></component>
    import Icons from 'components/workPanels/Icons'
    import WorkIntro from 'components/workPanels/WorkIntro'
    import SupplySummary from 'components/workPanels/SupplySummary'
    import SupplyDetails from 'components/workPanels/SupplyDetails'
    export default {
      components: {
      data () {
        return {
          selectedTab: 'Icons',
          tabs: [
              name: 'Icons',
              componentName: 'Icons'
              name: 'Introduction',
              componentName: 'WorkIntro'
              name: 'Summary',
              componentName: 'SupplySummary'
              name: 'Details',
              componentName: 'SupplyDetails'

    Any suggestions?

  • just solved my own problem - forgot to set :name=tab.name in both the q-tab and q-tab-panel. Changed the code to correct it.

Log in to reply