Vee-validate 不适用于使用 Nuxt.js 和 Vuetify 的范围 [英] Vee-validate not working with scopes using Nuxt.js and Vuetify

问题描述

我在使用 vee-validate 和 Vuetify 时遇到了一些验证问题:

I'm having some validation problems with vee-validate and Vuetify:

我有两个具有两个不同范围的表单，并且都在一个函数中提交.验证正在提交，但未在 UI 上显示输入错误:

I have two forms with two different scopes and both are submitted in one function. the validation is working on submit but it's not showing the input errors on the UI:

不同范围的输入:

<v-text-field
   id="PersonalName"
   v-model="PersonalName"
   label="Name"
   :error-messages="errors.collect('Name')"
   v-validate="'required|alpha_spaces'"
   data-vv-name="Name"
   data-vv-scope="scopePersonal"
   prepend-icon="face"
></v-text-field>

和

<v-text-field
   id="DeliveryAddressLine"
   v-model="DeliveryAddressLine"
   prepend-icon="home"
   v-validate="'required'"
   label="Delivery Address"
   data-vv-name="deliveryaddres"
   :error-messages="errors.collect('deliveryaddres')"
   data-vv-scope="shippingAddress"
   >
</v-text-field>

这是我的函数，在方法中:

And here is my function, inside methods:

async personalDetails () {
      var isPersonalDetails = false
      await this.$validator.validate('scopePersonal.*').then((isValid) => {
        if (isValid) {
          // do something
          isPersonalDetails = true
        } else {
          console.log('error on personal details')
        }
      })
      if (this.isDeliveryAddress) {
        await this.$validator.validate('shippingAddress.*').then((isValid) => {
          if (isValid) {
            // do something
            isPersonalDetails = true
          } else {
            isPersonalDetails = false
          }
        })
      }
      // move to next step - Vuetify
      if (isPersonalDetails) { this.residentialOrder = 6 }
    },

验证正在工作，如果输入的内容正确，它确实会进入下一步.alpha_text 没有数字)但它不会在输入本身上显示错误消息.

Validation is working and it does move to next step if the inputs have the right content Eg. alpha_text without numbers) but it doesn't show the error message on the inputs itself.

知道如何修复它吗?

推荐答案

你需要在你的集合中使用作用域

You need to use scope in your collect

:error-messages="errors.collect('shippingAddress.deliveryaddres')"

这篇关于Vee-validate 不适用于使用 Nuxt.js 和 Vuetify 的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！