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.