How to set a listener for tab click? @click doesn’t work.

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>

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.
Is there any docs or example about how to do that dynamic add remove tabs

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?

Thank you matt.
I already check this docs page and make a search from its search page but couldn’t find this from there.
Thanks.

Ok solved.

here is the code I am using.

by the way, I needed to rebuild quasar and delete and recreate cordova android project

mounted () {
window.AdMob.createBanner({
adId: ‘ca-app-pub-3940256099942544/6300978111’,
position: window.AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow: true })
},

Ok. Isolved admob decleration problem by “cordova platform remove android” and than add again.

However, there is still problem on using it in vue.

I have a completelly different problem now.

Withouth any AdMob decleration, it says AdMob is not defined in vendor.jpg

What can I do?

Hello mate! Thank You so much for your help!

I tried your code but while building I got these errors:

✘ http://eslint.org/docs/rules/curly Expected { after ‘if’ condition
C:\Users\mustafa\Desktop\deneme\qua\src\components\Index.vue:44:5
if (AdMob) AdMob.createBanner({
^

✘ http://eslint.org/docs/rules/no-undef ‘AdMob’ is not defined
C:\Users\mustafa\Desktop\deneme\qua\src\components\Index.vue:44:9
if (AdMob) AdMob.createBanner({
^

✘ http://eslint.org/docs/rules/no-undef ‘AdMob’ is not defined
C:\Users\mustafa\Desktop\deneme\qua\src\components\Index.vue:44:16
if (AdMob) AdMob.createBanner({
^

✘ http://eslint.org/docs/rules/no-undef ‘admobid’ is not defined
C:\Users\mustafa\Desktop\deneme\qua\src\components\Index.vue:45:13
adId: admobid.banner,
^

✘ http://eslint.org/docs/rules/no-undef ‘AdMob’ is not defined
C:\Users\mustafa\Desktop\deneme\qua\src\components\Index.vue:46:17
position: AdMob.AD_POSITION.BOTTOM_CENTER,
^