vant ui 表单验证不通过信息提示的消除

vant ui 表单验证不通过信息提示的消除

在使用vant表单验正消除表单不通过的信息时候可以个van-form 标签里加个 :key=”formKey” ， 我有尝试过使用:key=”+new Date()”来做这个key值，确实是可以消除不通过信息，但是又触发另一个问题，那就是我每输入一个字符就会自动帮我失去焦点
我的解决方案是在我需要的地方再修改key，代码示例：

<van-form @submit="onSubmit" >
 <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
 
  <div style="margin: 16px;">
    <van-button round  type="info" native-type="submit">
      提交
</van-button>
<van-button round  type="info" @click=”resetFrom” >
	取消      
    </van-button>
  </div></van-form>
export default {
  data() {
    return {
      Username:’’
    };
  },
  methods: {
  onSubmit(value){
  	console.log(value)
  },
 	resetFrom(){
 	 // 改变key值变化可以使得key所在元素进行重新渲染，从而达到消除错误不通过消息的目的
		this.formKey ++
	}
  },
};

好了，问题完美解决！！
本人是刚步入工作的小白，如果解决方案有什么不对的地方希望各路大神指出！