组件化标签-在组件上挂载两次

Question

我有一组vuetify选项卡，每个选项卡的内容都是有条件地呈现的。当打开第一个选项卡时，这会像预期的那样工作。当打开第二个选项卡或更高的选项卡时，mounted将在该选项卡内的组件上触发两次。

下面是选项卡的结构：

<v-tabs
      dark
      background-color="blue-grey darken-4"
      show-arrows
      height="30"
      v-model="name"
      v-if="openTabs.length"
    >
      <v-tabs-slider color="accent"></v-tabs-slider>

      <v-tab
        v-for="item in openTabs"
        :key="item.name"
        v-model="activeTab"
        class="pr-0 white--text"
        color="accent"
        active-class=""
        @click="setActiveTab(item)"
      >
        <template class="white--text text-capitalize">
            <v-icon>
              {{ item.icon }}
            </v-icon>
            &nbsp;
            {{ item.name }}
            <div v-if="item.changes">*</div>
            <v-btn plain width="10" class="px-0" @click="closeTab(item.id)">
                <v-icon
                dark
                small
                width="10"
                >mdi-close</v-icon>
            </v-btn>
        </template>
      </v-tab>
    </v-tabs>
    <v-tabs-items v-model="name">
      <v-tab-item
        v-for="item in openTabs"
        :key="item.name"
        style="height: 100%"
        :transition="false"
      >
        <BlockForm v-if="activeType === 'blocks'" v-bind:name="activeTab" v-bind:activeProject="activeProject" />
        <BiomeForm v-if="activeType === 'biomes'" v-bind:name="activeTab" v-bind:projectName="activeProject" />
        <ItemForm v-if="activeType === 'items'" v-bind:name="activeTab" v-bind:projectName="activeProject" />
        <RecipeForm v-if="activeType === 'recipes'" v-bind:name="activeTab" v-bind:projectName="activeProject" />
      </v-tab-item>
    </v-tabs-items>

下面是在setActiveTab中发生的事情

setActiveTab: function (item) {
        this.activeTab = item.name;
        this.activeType = item.type;
      }

BlockForm、ItemForm、BiomeForm和RecipeForm是打开的第二个(或第三个)选项卡中mounted触发两次的组件。我不确定这是否与我使用v-if的方式有关。

Answer 1

嘿伙计也有同样的问题。我找到了解释，因此对它进行了编码。它正常工作。试试看。

        <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>

这里的脚本数据。

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

和路由器

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,
              },
            },
          ],

这是解决方案的关键。

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