Vue.js在Edge浏览器中自动填充时V-model为何不更新数据？

问题根源 #

Edge浏览器的自动填充机制不会触发常规的input或change事件，而Vue的v-model依赖这些事件同步响应式数据，导致inputData无法及时更新，直到用户手动交互才触发同步。

修复步骤 #

1. 移除冗余的:value绑定
   代码中同时使用v-model="inputData"和:value="inputData"会导致数据绑定冲突，必须删除:value="inputData"：

   <input
     :class="props.background ? 'background' : ''"
     :type="props.type"
     v-model="inputData"
     @focusout="updateActiveState"
     :name="props.nameInput"
     @change="updateActiveState"
     @focusin="isActive = true"
     :is-active="isActive"
     :autocomplete="props.type"
     id="emailfield"
     minlength="5"
     maxlength="50"
     ref="inputRef" <!-- 添加ref用于DOM操作 -->
   />
   

2. 简化isActive状态管理
   用计算属性替代手动事件赋值，自动响应inputData的变化：

   const inputData = ref<string>('')
   const isActive = computed(() => inputData.value !== '')
   // 移除原来的isActive ref和事件中的手动赋值逻辑
   

3. 监听DOM元素的自动填充变化
   在onMounted中添加DOM监听，强制同步自动填充的内容到inputData：

   const inputRef = ref<HTMLInputElement | null>(null)
   
   onMounted(() => {
     if (!inputRef.value) return
     // 方法1：使用MutationObserver监听value属性变化
     const observer = new MutationObserver((mutations) => {
       mutations.forEach(mutation => {
         if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
           const currentValue = (mutation.target as HTMLInputElement).value
           if (currentValue !== inputData.value) {
             inputData.value = currentValue
           }
         }
       })
     })
     observer.observe(inputRef.value, { attributes: true })
   
     // 方法2：定时检测（备用方案，如果MutationObserver不生效）
     const checkInterval = setInterval(() => {
       const currentValue = inputRef.value?.value
       if (currentValue && currentValue !== inputData.value) {
         inputData.value = currentValue
       }
     }, 100)
   
     // 组件卸载时清理
     onUnmounted(() => {
       observer.disconnect()
       clearInterval(checkInterval)
     })
   })
   

4. 补充@input事件（增强兼容性）
   给input添加@input事件，确保常规输入时的同步（可选，因为计算属性已自动更新isActive）：

   <input
     ...
     @input="updateActiveState"
   />
   

完整优化后代码 #

import { ref, computed, onMounted, onUnmounted } from 'vue'

const inputData = ref<string>('')
const isActive = computed(() => inputData.value !== '')
const inputRef = ref<HTMLInputElement | null>(null)

onMounted(() => {
  if (!inputRef.value) return

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'value') {
        const currentValue = (mutation.target as HTMLInputElement).value
        if (currentValue !== inputData.value) {
          inputData.value = currentValue
        }
      }
    })
  })
  observer.observe(inputRef.value, { attributes: true })

  const checkInterval = setInterval(() => {
    const currentValue = inputRef.value?.value
    if (currentValue && currentValue !== inputData.value) {
      inputData.value = currentValue
    }
  }, 100)

  onUnmounted(() => {
    observer.disconnect()
    clearInterval(checkInterval)
  })
})

<label :class="isActive ? 'label-active' : 'label'" for="emailfield">{{ props.name }}</label>
<input
  :class="props.background ? 'background' : ''"
  :type="props.type"
  v-model="inputData"
  :name="props.nameInput"
  @focusin="isActive = true" <!-- 聚焦时强制激活 -->
  :is-active="isActive"
  :autocomplete="props.type"
  id="emailfield"
  minlength="5"
  maxlength="50"
  ref="inputRef"
/>

关键说明 #

• MutationObserver能精准监听DOM属性变化，是首选方案；定时检测作为备用，应对某些特殊场景。
• 使用计算属性管理isActive，避免重复的事件处理逻辑，确保状态与inputData完全同步。
• 移除冗余的:value绑定，避免v-model与手动value绑定的冲突。

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