q-tab-panel as element inside q-tab-panels not displaying.



  • I’m trying to dynamically add q-tab-panels that I have added as an element but they do not show.

    <template>
      <q-tab-panel :name="this.tabName">
        <div class="text-h6">{{tabName}}</div>
        {{tabDescription}}
      </q-tab-panel>
    </template>
    
    <script>
    export default {
      name: 'GameTab',
      props: ['tabName', 'tabDescription'],
      data () {
        return {
    
        }
      },
      methods: {
    
      }
    }
    </script>
    

    Above is my element, below is what I’m trying to put it in.

    <template>
      <q-layout view="hHh lpr fFr" style="min-height: inherit">
        <q-drawer v-model="right" side="right" bordered>
          <q-list bordered separator>
            <GameMenuLinks tabName="Mails" v-on:tabChange="tabChange" />
            <GameMenuLinks tabName="Alarms" v-on:tabChange="tabChange" />
            <GameMenuLinks tabName="Movies" v-on:tabChange="tabChange" />
          </q-list>
        </q-drawer>
        <q-tab-panels v-model="tab" animated>
          <GameTab
            tabName="Mails"
            tabDescription="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          />
        </q-tab-panels>
        <q-page-sticky position="bottom-right" :offset="[18, 18]">
          <q-btn @click="toggleDrawer" square color="accent" icon="list" />
        </q-page-sticky>
      </q-layout>
    </template>
    <script>
    // import WindowWatcher from './WindowWatcher'
    import GameMenuLinks from './GameMenuLinks'
    import GameTab from './GameTab'
    export default {
      data () {
        return {
          tab: 'Mails',
          width: 0,
          right: false
        }
      },
      name: 'Game',
      components: {
        // WindowWatcher
        GameMenuLinks,
        GameTab
      },
      methods: {
        onResize (size) {
          this.width = size.width
        },
        toggleDrawer () {
          this.right = !this.right
        },
        tabChange (value) {
          this.tab = value
        }
      }
    }
    </script>
    
    <style lang="stylus" scoped></style>
    
    

    I cannot see why they aren’t showing. The same process worked for the GameMenuLinks.
    Any idea?



  • U cant refer this in the template.



  • Even without this it didn’t work. I’m using a v-for instead now and I’m putting an element inside the q-tab-panel generated by the v-for loop. So I’ve got it working with the workaround. Thanks.



  • @Fedack can you make a repro codesandbox pls. looks like not a quasar issue at glance but a vue one :/.


Log in to reply