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

[darkshifty]

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>

[DDP]

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

[darkshifty]

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.

[darkshifty]

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

[DDP]