[Vuejs]-Vuetify tabs with components – mounted called twice on components

0👍

Hey mate have the same issue. I found explanation and as result code it.
It works properly. Try it.

        <template>
          <v-tabs centered="centered" grow v-model="activeTab">
            <v-tab
                v-for="tab of tabs"
                :key="tab.id"
                :id="tab.id"
                :to="tab.route" exact>
              {{ tab.title }}
            </v-tab>
            <v-tabs-items
                v-model="activeTab"
                @change="updateRouter($event)">
              <v-tab-item
                  v-for="tab of tabs"
                  :key="tab.id"
                  :value="tab.route"
                  class="tab_content">
                <router-view
                    v-if="tab.route === $route.fullPath && tab.route === activeTab">
                </router-view>
              </v-tab-item>
            </v-tabs-items>
          </v-tabs>
       </template>

Here script data.

data() {
    return {
      activeTab: '',
      tabs: [
        {id: 1, title: 'Business', route: '/business'},
        {id: 2, title: 'System', route: '/system'},
      ]
    };
  },
methods: {
    updateRouter(tab) {
      this.$router.push(tab)
    },
}

And router

children: [
            {
              path: '/business',
              name: 'business',
              component: () => import(
                /* webpackChunkName: "dashboard-page" */ './views/DashboardPage/DashboardTabs/DashboardBusinessTab'
                ),
              meta: {
                permission: null,
              },
            },
            {
              path: 'system',
              name: 'system',
              component: () => import(
                /* webpackChunkName: "dashboard-page" */ './views/DashboardPage/DashboardTabs/DashboardSystemTab'
                ),
              meta: {
                permission: null,
              },
            },
          ],

This was key for solution

v-if="tab.route === $route.fullPath && tab.route === activeTab">

Leave a comment