'How to make this.$refs.form method work by creating the component before?

I've been running into this problem for a while and it's time to try to solve it. At the moment, let's say I have 2 different components, where each have a form. Then, in my Home.vue, I'm creating a tab system with 2 tabs, allowing me to have each form on a tab, and creating the components, giving a ref to each. Inside each form component, there's different methods to handle data, things like reset() and validate() and to call them on my Home.vue, I'd simply do this.$refs.form1.validate().

Everything is working fine for the first form but whenever it comes down to call methods inside the second form without having pressed the second tab, a lot of undefined start to come up. From what I've seen, the second component isn't created yet, so I'm basically calling a method of something that doesn't exist. I've seen a lot of talking about the mounted() method and I believe this is the solution to the problem, but I have no idea how to implent it.

What I basically need is to have each form created once the page loads so I can call whatever I need, even if I'm still at the first form. Some parts of my code below:

Home.vue

<v-card class="mt-2" elevation="10" >
  <v-tabs v-model="tab"  show-arrows>
     <v-tab v-for="item in items" :key="item.tab">
      {{ item.tab }}
     </v-tab>
  </v-tabs>
  <v-tabs-items v-model="tab">
    <v-tab-item> 
       <Form1 ref="form1"/>
    </v-tab-item>
    <v-tab-item>
       <Form2 ref="form2"/>
    </v-tab-item>
  </v-tabs-items>
</v-card>

<script>
import Form1 from '@/components/Form1';
import Form2 from '@/components/Form2';

export default {
  components: { 
        Form1, 
        Form2
  }

  submit(){
      if(this.$refs.form1.validate() && this.$refs.form2.validate()){
        console.log('Hello')
      }
  }
</script>

Form1.vue

<v-form v-model="valid" ref="form" >
      <v-text-field
         v-model="resposta.answer"
         :rules="rules.required"
         label="Text"
      ></v-text-field>
</v-form>


methods: {
      validate() {
        return this.$refs.form.validate()
      }
}

Form2.vue can simply be a copy of the first one. I've tried to keep the code as simple as possible since there's a lot of stuff already going on, so if something is missing that doesn't really relate to the problem in question, I apologize.

vue.jsvuetify.js


Solution 1:[1]

you need to add the eager prop to the v-tab-item like so:

<v-tab-item eager> 
    <Form1 ref="form1"/>
</v-tab-item>
<v-tab-item eager>
    <Form2 ref="form2"/>
</v-tab-item>

this means it will render the tab even if it is not visible.

according to vuetify documentation:

When using v-tab-item's that contain required input fields you must use the eager prop in order to validate the required fields that are not yet visible.

Solution 2:[2]

Just use the eager prop on your v-tab-item. It will force the component to render even though the tab isn't selected yet.

<v-tabs-items v-model="tab">
    <v-tab-item eager> 
       <Form1 ref="form1"/>
    </v-tab-item>
    <v-tab-item eager>
       <Form2 ref="form2"/>
    </v-tab-item>
  </v-tabs-items>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Noy Gafni
Solution 2 Kapcash

Related Questions