I got error creating tabs without tabs array definition

[sergeynilov]

Hello, In @vue/cli app I try to use vue3-tabs component without tabs array definition, as inside of any tab-panel I would have other components and I got error :

[Vue warn]: Unhandled error during execution of mounted hook 
  at <TabPanels modelValue=1 onUpdate:modelValue=fn animate=true > 
  at <TestTrePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false > > 
  at <RouterView> 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
logError @ runtime-core.esm-bundler.js?5c40:211
handleError @ runtime-core.esm-bundler.js?5c40:203
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js?5c40:1873
flushPostFlushCbs @ runtime-core.esm-bundler.js?5c40:333
flushJobs @ runtime-core.esm-bundler.js?5c40:371
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:264
queueJob @ runtime-core.esm-bundler.js?5c40:258
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:811
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:811
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:811
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set value @ reactivity.esm-bundler.js?a1e9:721
finalizeNavigation @ vue-router.esm-bundler.js?6c02:3028
eval @ vue-router.esm-bundler.js?6c02:2901
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?6c02:2872
push @ vue-router.esm-bundler.js?6c02:2816
install @ vue-router.esm-bundler.js?6c02:3181
use @ runtime-core.esm-bundler.js?5c40:2911
eval @ main.js?56d7:25
./src/main.js @ app.js:1799
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:2316
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997
vue3-tabs.common.js?f4be:3420 Uncaught (in promise) TypeError: vnodes.map is not a function
    at getTabPanelOptions (vue3-tabs.common.js?f4be:3420)
    at eval (vue3-tabs.common.js?f4be:3387)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:1873)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:333)
    at flushJobs (runtime-core.esm-bundler.js?5c40:371)

and my vue file:

<template>
  <div>

    selectedTab:{{ selectedTab}}<br>
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        :key="'tab_details'"
        :val="1"
        :label="'Details'"
        :indicator="true"
      />
      <tab
        class="tab"
        :key="'tab_about'"
        :val="2"
        :label="'About'"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >

      <tab-panel
        :key="'tp_details'"
        :val="1"
      >
        <h3>Details</h3>
      </tab-panel>

      <tab-panel
        :key="'tp_about'"
        :val="2"
      >
        <h3>About</h3>
      </tab-panel>

    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, defineComponent } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  export default defineComponent({
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup () {
      const selectedTab = ref(1)

      const testOnMounted = async () => {
        console.log('testOnMounted!!!::')
      }

      onMounted(testOnMounted)

      return {
        selectedTab
      }
    } // setup() {

  })

</script>

<style scoped>
  .tab {
    padding: 10px 0px;
    margin: 10px 20px;
    background-color: yellow;
  }
  .active-tab {
    /*border-width: 0px;*/
    /*border-top-width: 2px;*/
    /*border-style: solid;*/
    border: 2px dotted red;
  }
  /* disable select highlight */
  .tab-panels {
    -webkit-user-select: none;
    -moz-user-select: none;
    border: 2px dotted blue;
  }
  .tab-panel {
    padding: 20px;
    /*box-sizing: border-box;*/
    border: 2px dotted green;
  }
</style>

as result first tab is active and I can not open the second tab. What is wrong ?

    "vue": "^3.0.0",
    "vue3-tabs": "^0.1.4",

Thanks!

[HJ29]

Just fixed the error, my bad. didn't realiszed v-for and non v-for slots giving different result. npm update vue3-tabs or yarn upgrade vue3-tabs update to v0.1.9

Let me know if the issue still there thanks

[sergeynilov]

Thanks! With v0.1.9 it works ok. But setting some text inside a tab panel, like :

Details

    <div>
      <input type="text" value="test text">
    </div>
    <p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint  occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
    </p>
    <ul>
      <li>Lorem 1st point </li>
      <li>Lorem 2nd point </li>
      <li>Lorem 3rd point </li>
    </ul>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint  occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
    </p>
  </tab-panel>

I see that I can not select any text inside a tab panel : https://imgur.com/a/qzoCaRZ

I checked “Inspect” of my browser and it does not see feature of my design...

[HJ29]

these two styles make it unable to select, remove it if u want to select text -webkit-user-select: none; -moz-user-select: none;

  /* disable select highlight */
  .tab-panels {
    -webkit-user-select: none;
    -moz-user-select: none;
    border: 2px dotted blue;
  }

[sergeynilov]

Thanks!It works in this way.