v-text-field浏览器自动填充值未同步v-model导致表单验证失效问题

问题原因 #

1. 浏览器自动填充属于浏览器内核层面的行为，填充输入框时不会主动触发input、change等用户交互类DOM事件。
2. Vuetify的v-text-field组件的v-model双向绑定逻辑，默认依赖上述交互事件来感知输入框值的变化，没收到事件就不会读取输入框最新值同步到绑定变量，因此会出现界面有值但变量为空的情况。
3. 点击页面或按键后会触发输入框的focus、blur等关联事件，组件此时会主动读取输入框的实际值，完成变量同步，验证规则也就会正常生效。

关联现象截图：

解决方案 #

• 方案一：明确指定autocomplete属性
  给v-text-field添加对应类型的autocomplete声明，部分版本的Vuetify会对明确声明凭证类型的字段做自动填充兼容处理：

  <v-text-field
    id="signEmail"
    v-show="!signInPasswordForm"
    class="font-size-base"
    v-model="signInFormProps.signInEmail"
    name="email"
    ref="email"
    type="email"
    :rules="specialEmailRules"
    solo
    flat
    tabindex="1"
    autocomplete="username"
  ></v-text-field>
  

• 方案二：挂载后手动同步值
  在页面挂载完成后加短延迟，主动读取输入框的DOM值同步到绑定变量，同时触发校验：

  // Vue3 示例
  import { onMounted, ref } from 'vue'
  const emailRef = ref(null)
  
  onMounted(() => {
    // 延迟100ms等待浏览器自动填充完成
    setTimeout(() => {
      const emailDom = document.getElementById('signEmail')
      if (emailDom?.value) {
        signInFormProps.signInEmail = emailDom.value
        emailRef.value?.validate()
      }
    }, 100)
  })
  

• 方案三：监听填充动画事件触发同步
  多数浏览器在执行自动填充时会触发输入框的animationstart动画事件，监听该事件触发同步比定时器更精准：

  onMounted(() => {
    const emailDom = document.getElementById('signEmail')
    const handleAutoFill = () => {
      if (emailDom.value) {
        signInFormProps.signInEmail = emailDom.value
        emailRef.value?.validate()
      }
    }
    emailDom.addEventListener('animationstart', handleAutoFill)
  })
  

内容的提问来源于stack exchange，提问作者Dugty