Vue中使用Vuetify的v-form组件时使用 v-if 切换时导致表单自动校验问题

前提 :
实现忘记密码功能, 在login页面点击忘记密码按钮,进入forgetPassword页面,输入正确邮箱进入修改邮箱界面.
问题 :
使用 v-if 切换时导致第二个表单自动校验,我写了一个简单的例子, 代码如下

示例代码：

<template>
    <div style="width:300px">
        <div v-if="aaa">
            <v-form ref="form" v-model="valid" lazy-validation>
                <v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name" required></v-text-field>
                <v-btn :disabled="!valid" color="success" class="mr-4" @click="validate">
                    Validate
                </v-btn>
            </v-form>
        </div>
        <div v-else>
            <v-form ref="form222" v-model="valid1111" lazy-validation>
                <v-text-field v-model="email" :rules="emailRules" label="E-mail" required></v-text-field>
            </v-form>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ForgotPassword',
    data() {
        return {
            aaa: true,
            valid: true,
            valid1111: true,
            name: '',
            nameRules: [v => !!v || 'Name is required', v => (v && v.length <= 10) || 'Name must be less than 10 characters'],
            email: '',
            emailRules: [v => !!v || 'E-mail is required', v => /.+@.+\..+/.test(v) || 'E-mail must be valid']
        }
    },
    methods: {
        validate() {
            if (this.$refs.form.validate()) {
                this.aaa = false
            }
        }
    }
}
</script>

显示 :

if	else

原因 :
两个v-form没有作区分标识, v-if 切换时内部误以为是同一个form元素, 导致触发校验

解决方案 :
给每个v-form添加不同的key值

<div v-if="aaa">
    <v-form ref="form" key="a" ></v-form>
</div>
<div v-else>
    <v-form ref="form222" key="b"></v-form>
</div>

这个问题困扰我好一会,一开始以为是其他因素引起的, 后来发现恍然大悟, 一直以为循环中需要加key值, 解决之后想写一篇文章记录一下,也帮助一下其他人