[SOLVED] q-route-tab with q-tab-panel content as seperate components

[genyded]

Anyone have or know of example where a-tabs are on one page and have q-route-tabs with q-tab panel content coming from other components? If we have everything on the same page, it works, but if the panel content is other components via the router, we get:

Error in render: "TypeError: Cannot read property 'name' of undefined"

found in

---> <QTabPanels>
       <QCard>
         <QPage>
           <PageAuth> at src/pages/Auth.vue
             <QPageContainer>
               <QLayout>
                 <MyLayout> at src/layouts/MyLayout.vue
                   <App> at src/App.vue
                     <Root>

[s.molinari]

That usually means your tab component isn’t getting the data it needs or rather the data it needs is undefined. Without code to see what you are attempting, it’s hard to say what is wrong. Try putting in some example code here: https://codesandbox.quasar.dev

Scott

[genyded]

OK. tried this - https://codesandbox.io/s/codesandbox-app-m507d - but as usual these sandboxes are a pain in the a** and cannot see my single file components.

[genyded]

OK - I took the components out of the router and added them back and now they are working. The Quasar docs do not have a literal example of this (route-tab since the slot prop ), so I am probably missing something simple. Not sure what or how to pass it since these is no slot prop anymore. Is the 'name; now the ‘value’?

[genyded]

Anyone have any thoughts on this? https://codesandbox.io/s/codesandbox-app-m507d still getting the original error.

[genyded]

OK after quite a bit of trial and error, finally figured this out and it’s way different than prior 1.x quasar versions. You used to have one <router-view> for all tabs, now you need one for each tab (at least if using panels). I’ve posted an actual full working version at https://codesandbox.io/s/codesandbox-app-endd4 in case any else runs into it or needs a reference. The code looks a bit odd with the multiple (3 in this case) <router-view> elements, but it works:

<template>
  <q-page class="flex flex-center">
    <q-card>
      <q-tabs inverted color="secondary" narrow-indicator class="bg-grey-3" dense>
        <q-route-tab default name="login" :to="'/login'" label="Login"/>
        <q-route-tab name="forgot" :to="'/forgot'" label="Forgot Password"/>
        <q-route-tab name="register" :to="'/register'" label="Register"/>
      </q-tabs>
      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="login">
          <router-view/>
        </q-tab-panel>
        <q-tab-panel name="forgot">
          <router-view/>
        </q-tab-panel>
        <q-tab-panel name="register">
          <router-view/>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </q-page>
</template>

<style>
</style>

<script>
export default {
  name: 'PageIndex',
  data() {
    return {
      tab: 'login'
    }
  }
}
</script>