Question

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

我有两种形式，具有两种不同的作用域，并且都在一个函数中提交。验证正在进行提交，但未在用户界面上显示输入错误：

具有不同范围的输入：

<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验证不适用于使用Nuxt.js和Vuetify的范围

1 个答案: