1
resposta

Tabs filho do filho

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.

1 resposta

Oi Juliana, tudo bom?

Poderia compartilhar esse trecho de código no github para que eu possa testar mais a fundo baseado no seu problema?