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 Panes

    Help
    1
    1
    559
    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.
    • K
      KSEI last edited by

      I can’t for the life of me get tab panes to work when loading a component through router view.
      My paths and children are setup correctly but it will not load on the call. Funny thing is if I reload the page the tabs load up correctly. Anyone with any suggestion on getting this to work. Thank you. All components are loaded correctly, paths are correct. There are no data or methods in these components.

      Here is the calling template:

      <template>
      <div>
      <div class=“flex-container-row-main”>
      <div class=“row-cUniverse” >
      <div class=“col-lg-12”>
      <div class=“flex-item”>

                <router-view></router-view>
        
               </div>
      
            </div>
        </div>
      

      </div>
      </div>
      </template>

      and here is the template to be loaded in router view

      <template>
      <div>

                <q-tabs>
                    <!-- Tabs - notice slot="title" -->
                    <q-tab default count="5" slot="title" name="tab-1" icon="message"> </q-tab>
                    <q-tab disable slot="title" name="tab-2" icon="fingerprint"> </q-tab>
                    <q-tab alert slot="title" name="tab-3" icon="account_box"> </q-tab>
                    <q-tab slot="title" name="tab-4" icon="accessibility"> </q-tab>
                    <q-tab slot="title" name="tab-5" icon="build"> </q-tab>
              
                    <q-tab-pane name="tab-1">Tab One</q-tab-pane>
                    <q-tab-pane name="tab-2">Tab Two</q-tab-pane>
                    <q-tab-pane name="tab-3">Tab Three</q-tab-pane>
                    <q-tab-pane name="tab-4">Tab Four</q-tab-pane>
                    <q-tab-pane name="tab-5">Tab Five</q-tab-pane>
                  </q-tabs>
      

      </div>
      </template>

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