vuetificar: ^2.5.10 vuex: ^3.6.2 vue: ^2.6.14
Tengo una aplicación desarrollada en v-tabs. En el componente secundario en la primera de estas pestañas, tengo un
<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>con
commitData() { this.$store.commit('setFile', this.file) },La tienda se configura correctamente porque la siguiente propiedad calculada en el componente principal
computed: { ...mapGetters({ file: 'getFile', }), },parece funcionar: lo veo de esta manera:
file: { deep: true, immediate: true, handler() { console.log("Received file: " + this.file); } },Lo sorprendente, al menos para mí, es que el mismo reloj anterior, implementado en otro componente en la segunda pestaña, no funciona hasta que visito (es decir, cambio a) el segundo panel. Sin embargo, la propiedad calculada funciona en este componente porque en la plantilla puedo ver la nueva propiedad.
Tras la primera visita a la ficha, el reloj sigue funcionando sin problemas.
¿Hay alguna razón para eso y una forma de evitar visitarlo para que el reloj funcione?
v-tabs carga contenido solo en la visita. Lo que significa que el componente se montará solo cuando esté activo.
Puede usar accesorios eager en sus componentes v-tab-item para asegurarse de que siempre estén cargados y montados.
Referencia de documentos API: https://vuetifyjs.com/en/api/v-tab-item/#props-eager