Tenho o seguinte código
<template>
<div class="container nav-margin">
<div class="tabs is-toggle is-fullwidth">
<ul>
<li :class="{'is-active': activeTab === 'search'}" @click="activeTab = 'search'">
<nuxt-link to="/accredited/search">
<span class="icon is-small"><i class="fa fa-search"></i></span>
<span>Pesquisa</span>
</nuxt-link>
</li>
<li :class="{'is-active': activeTab === 'register'}" @click="activeTab = 'register'">
<nuxt-link to="/accredited/register/data">
<span class="icon is-small"><i class="fa fa-address-card-o"></i></span>
<span>Cadastro</span>
</nuxt-link>
</li>
</ul>
</div>
<nuxt-child />
</div>
</template>
<script>
import NuxtChild from '../.nuxt/components/nuxt-child'
import NuxtLink from '../.nuxt/components/nuxt-link'
export default {
name: 'Accredited',
data () {
return {
activeTab: ''
}
},
components: {
NuxtChild,
NuxtLink
},
methods: {
activeTab: function () {
if (this.$route.path.split('/').indexOf('register') > -1) {
this.activeTab = 'register'
console.log(this.activeTab)
} else {
this.activeTab = 'search'
console.log(this.activeTab)
}
}
}
}
</script>
<style lang="sass" scoped>
.fa-thumbs-o-down
font-size: 62px
color: #e34120
.tabs.is-toggle a
background-color: #ffffff
</style>
erro:
[Vue warn]: Do not use built-in or reserved HTML elements as component id: TextArea
Na página existe 2 tabs search e register, dentro da tab register existe outras tabs, ou seja filho dentro de filho, mais toda vez que clico nas tabs dentro de register, a tab de register não fica selecionado com is-active. Utilizei esse código:
methods: {
activeTab: function () {
if (this.$route.path.split('/').indexOf('register') > -1) {
this.activeTab = 'register'
console.log(this.activeTab)
} else {
this.activeTab = 'search'
console.log(this.activeTab)
}
}
}
Mais não está dando certo.