Open a q-tab-panel with a q-item



  • Hi,

    I am trying to open a tab on the click of a list item however i cannot find any documentation on how to trigger such an event, is this something i have to write myself? or am i missing something little in the below code?

    <template>
        <q-page class="q-pa-md full-width row justify-center q-gutter-md items-start content-start">
          <q-card flat bordered class="col-xs-12 col-md-3 col-lg-2 bg-grey-1">
            <q-card-section>
              <div class="row items-center no-wrap">
                <div class="col">
                  <q-list v-model="tab">
                    <q-item
                      clickable
                      v-ripple
                      :active="tab === 'account'"
                      @click="tab = 'account'"
                      active-class="my-menu-link">
                      <q-item-section avatar>
                        <q-icon name="eva-inbox" />
                      </q-item-section>
    
                      <q-item-section>Account</q-item-section>
                    </q-item>
    
                    <q-item
                      clickable
                      v-ripple
                      :active="tab === 'subscriptions'"
                      @click="tab = 'subscriptions'"
                      active-class="my-menu-link">
                      <q-item-section avatar>
                        <q-icon name="eva-lock" />
                      </q-item-section>
    
                      <q-item-section>Subscriptions</q-item-section>
                    </q-item>
    
                    <q-item
                      clickable
                      v-ripple
                      :active="tab === 'billing'"
                      @click="tab = 'billing'"
                      active-class="my-menu-link">
                      <q-item-section avatar>
                        <q-icon name="eva-lock" />
                      </q-item-section>
    
                      <q-item-section>Billing</q-item-section>
                    </q-item>
                  </q-list>
                </div>
              </div>
            </q-card-section>
          </q-card>
          <q-card flat bordered class="col-xs-12 col-md-8 col-lg-6 bg-grey-1">
            <q-card-section>
              <div class="row items-center no-wrap">
                <div class="col">
                  <q-tab-panels v-model="tab" animated>
                    <q-tab-panel name="account">
                      <div class="text-h6">account</div>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </q-tab-panel>
    
                    <q-tab-panel name="subscriptions">
                      <div class="text-h6">subscriptions</div>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </q-tab-panel>
    
                    <q-tab-panel name="billing">
                      <div class="text-h6">billing</div>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    </q-tab-panel>
                  </q-tab-panels>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </q-page>
    </template>
    
    <style>
    </style>
    
    <script>
        export default {
            name: 'PageSettings',
            data () {
                return {
                    tab: 'account'
                }
            }
        }
    </script>
    
    <style>
      .my-menu-link {
        color: white;
        background: #F2C037;
      }
    </style>
    
    


  • I tried this code and it seems to work, what’s the problem?



  • Thank you for putting time into this.
    Once you click the menu item, the content of the “tab-panel” doesn’t change. i used the same approach as the tab panel docs.



  • This issue is resolved, i did not notice but i only added QTabPanels this while QTabPanel was needed



  • 👍🏻


Log in to reply