veeValidate 3.x + Nuxt js：将自定义错误推送到 ValidationObserver答案

【问题标题】：veeValidate 3.x + Nuxt js: push a custom error to ValidationObserverveeValidate 3.x + Nuxt js：将自定义错误推送到 ValidationObserver
【发布时间】：2019-12-26 07:26:23
【问题描述】：

我正在使用 Nuxt js + veeValidate 3.x

我的插件是这样的：

import Vue from 'vue'
import {
  ValidationObserver,
  ValidationProvider,
  extend
} from 'vee-validate'
import { required, email, min, confirmed } from 'vee-validate/dist/rules'

extend('required', {
  ...required,
  message: 'This field is required'
})
extend('email', email)
extend('min', min)
extend('confirmed', confirmed)
Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)

作为插件添加到nuxt.config.js plugins: [{ src: '~/plugins/vee-validate.js', ssr: false }, .. 模板如下所示：

<ValidationObserver ref="registrationForm"> 
   <ValidationProvider rules="required|email" name="Email Address" v-slot="{ errors }">
    <div>
     <input type="text" v-model.lazy="user.email"/>
     <span class=form-errors">{{ errors[0] }}</span>
    </div>
   </ValidationProvider>
</ValidationObserver>

验证以这种方式完美运行：

methods: {
   async submit() {
      const isValid = await this.$refs.registrationForm.validate()
      if (isValid) {
        this.register()
     ....

但在执行this.register() 期间我可能会从API 端收到一些错误（例如：错误：电子邮件已存在）。如何将收到的错误推送到验证错误数组中（如果有的话）？ this.errors.add() 的旧方法（当然）不再起作用了。我读过 ErrorBag，但我只是不明白如何在插件中导入/导出它

【问题讨论】：

标签： nuxt.js vee-validate

【解决方案1】：

终于在这里找到了答案：

https://logaretm.github.io/vee-validate/advanced/server-side-validation.html#handling-backend-validation

称为“处理后端验证”

简而言之，答案是：

....
this.$refs.registrationForm.setErrors({ email: ['Your email does\'t look good enough! Try again!'] })
...

会在输入框下方显示错误

PS：如果您使用 Laravel 作为后端，错误处理将立即可用：

// try,async stuff sending data to the endpoint
...
catch (error) {
   this.$refs.registrationForm.setErrors(error.response.data.errors)
}

【讨论】：