Vuetify 表单问题

Posted 2023-02-19

【中文标题】Vuetify 表单问题

【英文标题】：Vuetify form issues

【发布时间】：2020-03-26 05:22:39

【问题描述】：

我使用 Vuetify 开发了一个模块化弹出表单，但是当我单击电子邮件输入字段并取消选择导致“空”错误，然后切换到注册选项卡时，它会导致“空”错误名称字段。

似乎问题与文本字段的顺序有关，因为如果我导致密码文本字段错误（登录表单的第二个位置），然后切换到注册表单，第二个输入字段会提示错误。

example in link

js fiddle code

【参考方案1】：

我认为selectedTab 的v-if 正在触发更改通知，因此第二个表单验证（尽管我不知道为什么它只是前两个字段）。相反，请使用v-show...

              <v-card-text v-show="selectedTab == 2">
                    <v-container>
                        <v-form ref="registerForm" v-model="valid" lazy-validation>
                            ...
                        </v-form>
                    </v-container>
              </v-card-text>
              <v-card-text v-show="selectedTab == 1">
                    <v-container>
                        <v-form ref="loginForm" v-model="valid" lazy-validation>
                            ...
                        </v-form>
                    </v-container>
              </v-card-text>

https://codeply.com/p/9NtOj5QrPe