Forms VueJS表单验证与VeeValidate，can'；在某些移动设备上键入t

在使用

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>

问题:

在某些移动Chrome（版本7）上，当您开始在输入字段中键入时，该字段立即重置并验证，但出现错误。注:

• 根据设备的不同，并非所有版本7的色度都会出现这种情况
• 如果您将键盘连接到手机上，它将正常工作
• 只有在初始化后该字段的第一次输入是通过触摸键盘完成的情况下，才会出现这种情况。如果使用普通键盘键入，请重置字段，如果有效，请使用触摸键盘键入
• 如果您不输入，而是使用触摸键盘，它将正确验证，但仍为空。在这种情况下设置填充类。这使我们认为模型是由于某种奇怪的原因而设置、验证和重置的。

---

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

所以Vee Validate中有一个bug。在某些移动设备上，

$watch API

的处理方式不同，这意味着

v-model

没有实时更新<代码>v-validate无法处理此问题

一种解决方法是在输入中添加

数据vv validate on=“blur”

，使vee等待模型实际设置

尽管开发商在几个月前做出了承诺，但目前还不清楚这是否会得到解决

以下是GitHub讨论的链接：

---

这个问题似乎与某些设备上的Chrome有关，与使用的版本和Safari无关。Firefox看起来很稳定，所以Vee Validate中有一个bug。在某些移动设备上，

$watch API

的处理方式不同，这意味着

v-model

没有实时更新<代码>v-validate无法处理此问题

一种解决方法是在输入中添加

数据vv validate on=“blur”

，使vee等待模型实际设置

尽管开发商在几个月前做出了承诺，但目前还不清楚这是否会得到解决

以下是GitHub讨论的链接：

这个问题似乎与某些设备上的Chrome有关，与使用的版本和Safari无关。Firefox看起来很稳定

    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
       }