Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

288
Views
I cannot watch Vuex state in components within v-tabs until first visit

vuetify: ^2.5.10 vuex: ^3.6.2 vue: ^2.6.14

I have an application developed in v-tabs. In the child component in the first of these tabs, I have a

<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>

with

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

The store gets correctly set because the following computed property in the parent component

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

seems to work: I watch it in this way:

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

The surprising thing, at least to me, is that the very same watch above, implemented in another component in the second tab, does not work until I visit (i.e., switch to) the second panel. However, the computed property works in this component because in the template I can see the new property.

After the first visit to the tab, the watch continues to work without problems.

Is there a reason for that and a way to avoid visiting it to make the watch work?

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

v-tabs loads content only on visit. Which means component will mount only when it's active.

You can use eager prop on your v-tab-item components to make sure they're always loaded and mounted.

API Docs reference: https://vuetifyjs.com/en/api/v-tab-item/#props-eager

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!