vue.js - Vuetify 表单问题
问题描述
我使用 Vuetify 开发了一个模块化弹出表单,但是当我单击电子邮件输入字段并取消选择导致“空”错误,然后切换到注册选项卡时,它会导致名称字段出现“空”错误.
似乎问题与文本字段的顺序有关,因为如果我导致我的密码文本字段(登录表单的第二个位置)出错,然后切换到注册表单,第二个输入字段会提示错误。
example in link
解决方案
我认为v-if
forselectedTab
正在触发更改通知,因此第二种形式会验证(尽管我不知道为什么它只是前 2 个字段)。相反,使用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>