Vee驗證不適用於使用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')"