Vee-validate not working with scopes using Nuxt.js

Question

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

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:

The inputs with different scopes:

<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>

and

<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 }
    },

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.

Any idea about how to fix it?

Answer 1

You need to use scope in your collect

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