vue.js - 审核表格问题(Vuetify form issues)

Question

I've developed a modular popup form using Vuetify, but when i click the email input field and deselect to cause an "empty" error, and then switch over to the register tab, it then causes a "empty" error to the name field.

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

It seems the issue is linked to the ordering of the text field, because if i then cause the error for my password text field (2nd position for login form), then switch to the register form, the second input field prompts a an error.

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

example in link

js fiddle code

(js提琴代码)

  ask by L.Flores translate from so

Answer 1

I think the v-if for the selectedTab is triggering a change-notification, so the 2nd form validates (although I don't know why it's only the first 2 fields).

(我认为selectedTab的v-if会触发更改通知，因此第二个表单会进行验证（尽管我不知道为什么它只是前两个字段）。)

Instead, use v-show ...

(而是使用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

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