Q-tab Panes



  • 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>