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.

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 an error.

example in link

js fiddle code

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). Instead, use 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