已安装挂钩中 v-tab-item 内容的引用为空

Question

我正在使用 Vuetify 选项卡在不同选项卡下显示两个不同的组件。我在这里面临的问题是，当mounted()我尝试使用refs组件时，它只提供了ref第一个组件的详细信息，而一般参考资料并未显示。请帮我找出哪里出错了。

我已经添加了调试器mounted()，当我这样做时，this.$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 延迟渲染选项卡（换句话说，不渲染仍然隐藏的选项卡的内容）

您可以使用eagerprop onv-tab-item强制渲染隐藏选项卡。请参阅文档