提交后如何解决验证错误

Question

我对表单中的每个输入都使用了 veevalidate 规则。提交有效数据后，所有这些数据都已成功发送到后端，但在前端，每个输入都被高亮显示为有效。

我已经从 veevalidate 添加了重置方法，以便在选择提交时取消设置任何错误。但它不起作用。这是我的代码的一部分

       beforeSubmit() {
       this.$validator.pause();
       this.$nextTick(() => {
          this.$validator.errors.clear();
          this.$validator.fields.items.forEach(field => 
           field.reset());
          this.$validator.fields.items.forEach(field => 
          this.errors.remove(field));
          this.$validator.resume();
           });

          this.$validator.validateAll().then((result) => {
              this.onSubmit();
              ...

Answer 1

我想到了解决方案：当所有错误都已从下一次使用 $nextTick 呈现的表单中删除后，我们应该将 this.$validator.resume() 方法替换为 this.$validator.reset( ).就是这样。一般来说，工作部分是

beforeSubmit() {
   this.$validator.pause();
   this.$nextTick(() => {
          this.$validator.errors.clear();
          this.$validator.fields.items.forEach(field => 
           field.reset());
          this.$validator.fields.items.forEach(field => 
          this.errors.remove(field));
          this.$validator.reset();
           });

          this.$validator.validateAll().then((result) => {
              this.onSubmit();
              ...

提交后如何解决验证错误

How to solve Validation error after submit

vue.js

nuxt.js

vee-validate