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

[Fedack]

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?

[metalsadman]

U cant refer this in the template.

[Fedack]

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.

[metalsadman]

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