温馨提示:本文翻译自stackoverflow.com,查看原文请点击:vue.js - How to solve Validation error after submit
vue.js nuxt.js vee-validate

vue.js - 提交后如何解决验证错误

发布于 2020-03-27 11:40:16

我对表单中的每个输入使用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();
              ...

查看更多

查看更多

提问者
Valerii Voronkov
被浏览
173
Valerii Voronkov 2019-07-20 16:35

我想到了解决方案:当使用$ nextTick在下一次渲染中从表单中删除所有错误时,我们应该使用this。$ validator.reset()替换this。$ validator.resume()方法。就是这样。一般来说,工作部分是

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();
              ...