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:

    <template>
      <div>
        <q-tabs v-model="selectedTab">
          <q-tab v-for="tab in tabs" :key="tab.name"
          :label="tab.name"
          :name="tabe.name"
          />
        </q-tabs>
    
        <q-tab-panels keep-alive v-model="selectedTab">
          <q-tab-panel
            v-for="tab in tabs" :key="tab.name" :name="tab.name"
    >
            <component :is="tab.componentName"></component>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </template>
    
    <script>
    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: {
        Icons,
        WorkIntro,
        SupplySummary,
        SupplyDetails
      },
      data () {
        return {
          selectedTab: 'Icons',
          tabs: [
            {
              name: 'Icons',
              componentName: 'Icons'
            },
            {
              name: 'Introduction',
              componentName: 'WorkIntro'
            },
            {
              name: 'Summary',
              componentName: 'SupplySummary'
            },
            {
              name: 'Details',
              componentName: 'SupplyDetails'
            }
          ]
        }
      }
    }
    </script>
    
    

    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