Vee-validate 不使用 Nuxt.js 和 Vuetify 的作用域

Question

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

我有两个具有两个不同范围的表单，并且都在一个函数中提交。验证正在提交，但未显示 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>

这是我的函数，在方法内部：

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 没有数字）但它不会在输入本身上显示错误消息。

知道如何解决吗？

Answer 1

您需要在收集中使用范围

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

Vee-validate 不使用 Nuxt.js 和 Vuetify 的作用域

Vee-validate not working with scopes using Nuxt.js and Vuetify

javascript

vue.js

nuxt.js

vuetify.js

vee-validate