Dynamic Tab Addition



  • Hello. I have a new problem. I want to add new tabs and its content dynamically, however I could not handle it.

    here is my code

        <div id="messagetab-list">
    	<q-tabs
    	  :refs="$refs"
    	  v-model="xTabsModel"
    	>
    	
    	  <q-tab
    	    is="messagetab-item"
    		v-for="messagetab in messagetabs"
            v-bind:key="messagetab"
    		v-bind:index="index"
    		v-bind:name="tabNumber"
    		icon="message"
    	  >Tab 1</q-tab>
    	 
    	  <q-tab
    		name="xtab-2"
    		icon="alarm"
    	  >Tab 2</q-tab>
    	  <q-tab
    		name="xtab-3"
    		icon="accessibility"
    	  >Tab 3</q-tab>
    	</q-tabs></div>
    

    I wanted to add new tabs and its content as template. I could not pass new tab stage so no attempt to add its content.

    When I try to add new tabs with messagetab.push() new tabs are added but pre added content does not shown in tab content. I got an error:

                                quasar.common.js?e3df:7689 Uncaught TypeError: 
                               this.$parent.setActiveTab is not a function
    at VueComponent.activate (eval at <anonymous> (app.js:1643), <anonymous>:7689:24)
    at Proxy.boundFn (eval at <anonymous> (app.js:803), <anonymous>:171:12)
    at click (eval at <anonymous> (app.js:1643), <anonymous>:7626:15)
                                  at HTMLDivElement.invoker (eval at <anonymous> (app.js:803), 
                      <anonymous>:1743:18)
    

    Any ideas?


  • Admin

    Hi, you need to upgrade to v0.14 for dynamic add/remove of tabs.



  • Hello.
    Is there any docs or example about how to do that dynamic add remove tabs


  • Admin

    Using v-for like you did :)
    But you need Quasar v0.14.



  • How can I properly upgrade my quasar version my friend? according to github relases, the lastest relase is 13.10. I tried "quasar init default … ", it says quasar version is 0.13.4 in package.json,

    edit:
    I found it : http://beta.quasar-framework.org/
    tried this: "npm update quasar-framework"
    no any output.

    tried this again: quasar init default <folder_name>

    problem exist.

    when i tried this: “quasar init default#beta <folder_name>” it created project with latest release. Thank you!



  • Hello again.
    I did upgrade quasar 0.14 however my problem persist. While browsing the page, I want to add new tab. When I use v-for browser gives me this error message:

    [Vue warn]: Unknown custom element: <q-tab> - did you register the component correctly? For recursive components, make sure to provide the “name” option.
    found in
    —> <MessagetabItem>
    <QTabs>
    <Chat> at C:\Users\mustafa\Desktop\deneme\chat2\src\components\Chat.vue
    <Index> at C:\Users\mustafa\Desktop\deneme\chat2\src\App.vue
    <Root>

    my html code:

    	 <div id="messagetab-list">
    	<q-tabs v-model="tabsModel">
    	  <q-tab name="xtab-1" icon="message" slot="title" />
    	  <q-tab name="xtab-2" icon="account_box" slot="title" />
    	  <q-tab 			  
    		  is="messagetab-item"
    		  v-for="(messagetab, index) in messagetabs"
              v-bind:key="messagetab"
    		  v-bind:index="index"
    		  name="xtab-3" 
    		  icon="mail" 
    		  slot="title"  />
    	  <q-tab-pane name="xtab-1">Tab One</q-tab-pane>
    	  <q-tab-pane name="xtab-2">Tab Two</q-tab-pane>
    	  <q-tab-pane name="xtab-3">Tab Three</q-tab-pane>
    	</q-tabs>
    	 </div>
    	
    	<button class="primary" v-on:click="messagetabs.push('xtab-4')">tab add</button>
    

    so what have I done wrong?

    edit: and this is component

    Vue.component(‘messagetab-item’, {
    template: <q-tab >helloo</q-tab>,
    props: [‘tabNumber’]
    })

    edit2:

    solved!

    by adding this template instead of using inside template

    <template>
    <q-tab name=“xtab-3” icon=“message” slot=“title” />
    </template>

    <script>
    import { QTab } from 'quasar’
    export default {
    name: ‘tabbar’,
    components: {
    QTab
    }
    }
    </script>


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.