v-tab-item 内容的引用在挂载钩子中为空

Question

我正在使用 Vuetify 选项卡在不同的选项卡下显示两个不同的组件。 我在这里面临的问题是，在mounted()当我尝试使用组件的refs时，它只给我第一个组件的ref ，即细节，一般的 refs 不显示。 请帮我找出我哪里出错了。

我在mounted()添加了调试器，当我这样做时this.$refs只显示第一个细节refs。

    <template>
      <div>    
        <v-tabs slot="extension"
                v-model="tab_title"
                centered
                color="black"
                slider-color="red">
          <v-tab  key="details" href="#tab-details">Details</v-tab>
          <v-tab  key="general" href="#tab-general">General</v-tab>    
        </v-tabs>
        <v-tabs-items touchless v-model="tab_title">
          <v-tab-item key="details" value="tab-details">
            <v-card flat>
              <Details ref="details_form"></Details>
            </v-card>
          </v-tab-item>
          <v-tab-item key="general" value="tab-general">
            <v-card flat>
              <Info ref="general_form" :agent="agent"></Info>
            </v-card>
          </v-tab-item>
        </v-tabs-items>
      </div>
    </template>
    
    <script>
      import Details from 'views/details.vue';
      import Info from 'views/info.vue';
    
      export default {
        components: {
          Info,
          Details,
        },
        props: ['agent'],
        data: function () {
          return {
            tab_title: 'tab-account-details'
          };
        },
        mounted: function () {
          debugger
        }
      };
    </script>

Answer 1

这可能是因为 Vuetify 懒惰地呈现选项卡（换句话说，不呈现仍然隐藏的选项卡的内容）

您可以在v-tab-item上使用eager prop 来强制渲染隐藏的选项卡。 查看文档