表单重置vee验证后出现错误3

Question

我正在使用vee-validate 3.1.1和vue 2.5.17。

成功提交表单后，我将重置输入

this.name = ''

但是重置输入后会显示验证错误消息，如下图所示

vee-validate 2中存在相同的问题。* 我已经用这段代码解决了

this.$nextTick(() => {
    this.errors.clear();
})  

Answer 1

//first reset your form values
this.name = '';
//then do this to reset your ValidationObserver
this.$nextTick(() => this.$refs.observer.reset());

这要求您将表单输入包装在带有属性ref="observer"的ValidationObserver中。否则，您需要在同一回调中调用您使用的每个ValidationProvider的reset方法。

请参见here，了解他们为vee-validate提供的示例。 “重置表单”涵盖了您的工作，下一个示例显示了我在说什么（“使用$ refs进行程序化访问”）。

Answer 2

在Vee-validate 3 documentations之后，建议在请求动画帧后重置表格。

您可以执行以下操作：

methods: {
    async reset() {
       this.name = '';
       requestAnimationFrame(() => {
          this.$refs.observer.reset();
       );
    }
}

Answer 3

已知这是VeeValidate的一个错误，由于某种原因尚未得到解决，但是使async方法首先重置变量，然后使观察者工作，似乎可以使它工作

因此，您可以坚持这一变通方法，直到有一天VeeValidate对其进行修复。

methods: {
  async resetForm() {
    this.name = '';
    this.$refs.observer.reset();
  }
}