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 來強制渲染隱藏的選項卡。 查看文檔