使用 VeeValidate 进行 VueJS 表单验证，无法在某些移动设备上键入

Question

我们在用Vee-Validate验证的表单中遇到了一个奇怪的问题我们有一个输入：

<input
v-validate="'required|name'"
id="firstName"
v-model="firstName"
:class="{'is-invalid': errors.has('firstName'), 'filled': firstNameFilled}"
type="text"
class="form-control"
name="firstName">
<label for="firstName">Vorname*</label>

以下脚本：

computed: {
...mapGetters({
formData: 'registration/formData'
}),
firstNameFilled () {
return this.formData.firstName !== null
},
firstName: {
get () {
return this.formData.firstName
},
set (data) {
this.$store.dispatch('registration/updateFormData', { firstName: 
data })
}
},
methods: {
async validate () {
this.registrationButtonDisabled = true
try {
const needCaptcha = this.$route.query.utm_campaign && 
this.$route.query.utm_campaign.includes('display');
this.$store.dispatch('registration/updateFormData', { needCaptcha: needCaptcha });
const result = await this.$validator.validateAll()
if (result) {
this.next()
}
} catch (e) {
console.log(e)
}
this.registrationButtonDisabled = false
}

问题：

在一些移动Chromes(版本7(上，当你开始在输入字段中输入时，该字段会立即重置并进行错误验证。注：

• 并非所有版本7 Chromes都会出现这种情况，具体取决于设备
• 如果你把键盘连接到手机上，它就能工作
• 只有在初始化后通过触摸键盘完成对该字段的第一次输入时，它才会以这种方式工作。如果使用普通键盘键入，请重置字段，如果有效，请使用触摸键盘键入
• 如果你不打字，而是使用触摸键盘建议，它会正确验证，但仍然为空。填充的类就是在这种情况下设置的。这让我们认为，由于某种奇怪的原因，模型被设置、验证，然后重新设置

这显然很难调试，有人知道吗？

Answer 1

因此Vee Validate中存在一个错误。在一些移动设备上，$watch-API的切换方式不同，这意味着v-model不是实时更新的。v-validate无法处理此问题。

一种解决方法是将data-vv-validate-on="blur"添加到输入中，使vee等待模型实际设置。

尽管开发商几个月前就做出了承诺，但这一问题是否会得到解决似乎还不清楚。

以下是GitHub讨论的链接：https://github.com/baianat/vee-validate/issues/1281#issuecomment-399920810

这个问题似乎与一些设备上的Chrome有关，与使用的版本以及Safari无关。Firefox似乎稳定的