2

vuetify：^2.5.10 vuex：^3.6.2 vue：^2.6.14

我有一个在 v-tabs 中开发的应用程序。在这些选项卡中第一个的子组件中，我有一个

<v-file-input
    v-model="file"
    outlined
    :rules="selector_rules"
    :clearable="false"
    :show-size="1000">
</v-file-input>
<v-btn color="primary" @click="commitData" class="mr-2">Commit</v-btn>

和

commitData() {
  this.$store.commit('setFile', this.file)
},

由于父组件中的以下计算属性，存储被正确设置

computed: {
    ...mapGetters({
      file: 'getFile',
    }),
},

似乎有效：我以这种方式观看它：

file: {
  deep: true,
  immediate: true,
  handler() {
    console.log("Received file: " + this.file);
  }
},

至少对我来说，令人惊讶的是，上面的手表在第二个选项卡的另一个组件中实现，直到我访问（即切换到）第二个面板才工作。但是，计算属性在此组件中有效，因为在模板中我可以看到新属性。

首次访问选项卡后，手表继续正常工作。

是否有这样做的理由以及避免访问它以使手表正常工作的方法？

4

1 回答 1

1

v-tabs仅在访问时加载内容。这意味着组件只有在它处于活动状态时才会安装。

您可以在组件eager上使用 propv-tab-item以确保它们始终被加载和安装。

API 文档参考：https ://vuetifyjs.com/en/api/v-tab-item/#props-eager

于 2021-11-01T11:48:46.423 回答