Dynamic Tab Addition

[mustotto]

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?

[rstoenescu]

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

[mustotto]

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

[rstoenescu]

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

[mustotto]

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!

[mustotto]

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>