如何通过之前创建组件使 this.$refs.form 方法工作？

Question

我运行这个问题已经有一段时间了，是时候尝试解决它了。目前，假设我有 2 个不同的组件，每个组件都有一个表单。然后，在我的 Home.vue 中，我正在创建一个包含 2 个选项卡的选项卡系统，允许我将每个表单放在一个选项卡上，并创建组件，为每个选项卡提供一个引用。在每个表单组件中，有不同的方法来处理数据，例如 reset() 和 validate() 并在我的 Home.vue 上调用它们，我只是做 this.$refs.form1.validate().

第一种形式一切正常，但每当在没有按下第二个选项卡的情况下调用第二种形式中的方法时，就会出现许多未定义的问题。据我所知，第二个组件还没有创建，所以我基本上是在调用一个不存在的方法。我看到很多关于 mounted() 方法的讨论，我相信这是解决问题的方法，但我不知道如何实现它。

我基本上需要的是在页面加载后创建每个表单，这样我就可以调用我需要的任何内容，即使我仍处于第一个表单。下面是我的部分代码：

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 可以简单地复制第一个。我尽量让代码尽可能简单，因为已经有很多事情要做，所以如果缺少与所讨论的问题无关的内容，我深表歉意。

Answer 1

您需要将 eager 属性添加到 v-tab-item 中，如下所示：

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

这意味着它会呈现选项卡，即使它不可见。

根据 vuetify 文档：

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.

Answer 2

只需在 v-tab-item 上使用 eager 道具。即使尚未选择选项卡，它也会强制组件呈现。

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

如何通过之前创建组件使 this.$refs.form 方法工作？

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

vue.js

vuetify.js