No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-tab-panels with dynamic component content

    Help
    1
    2
    1474
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CWoodman
      CWoodman last edited by CWoodman

      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?

      1 Reply Last reply Reply Quote 0
      • CWoodman
        CWoodman last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post