[英]Vee-validate not working with scopes using Nuxt.js and Vuetify
我在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,不带数字),但不会在输入本身上显示错误消息。
关于如何解决它的任何想法?
您需要在收集中使用范围
:error-messages="errors.collect('shippingAddress.deliveryaddres')"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.