web-dev-qa-db-ja.com

veeValidate 3.x + Nuxt js：カスタムエラーをValidationObserverにプッシュする

私は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.jsvee-validate
3
Shirker

最後に私はここで答えを見つけました：

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)
}
2
Shirker