Vue.js使用地址查询功能时v-model绑定数据不更新问题

我使用邮编搜索服务来填充地址表单字段。

选中地址后，表单字段会正确填充，比如城镇字段会填入对应城镇值。
遇到的问题是：此时v-model绑定的模型数据没有同步更新。
相关代码如下：

<div class="form-group address">
    <label for="postcodeFormField">Postcode *</label>
    <input name="postcode" v-model="contact.postcode" type="text" class="form-control" id="postcodeFormField" placeholder="SW7 3RX" required>
</div>

手动在输入框中输入内容，v-model绑定的模型会正常更新，但选中地址后自动填充到表单字段的地址数据，不会同步反映到绑定的模型中。

问题原因 #

v-model的同步机制依赖监听输入框的input事件实现，第三方邮编搜索服务自动填充表单时，仅直接修改了输入框的value属性值，没有主动触发input事件，因此v-model无法感知到值的变化，也就不会同步更新绑定的模型数据。手动输入时会天然触发input事件，所以同步逻辑正常。

解决方案 #

方案1：通过邮编服务的选中回调直接赋值（最推荐） #

绝大多数邮编搜索服务都会提供地址选中的回调事件，你可以直接在回调中拿到选中的完整地址数据，手动给绑定的模型变量赋值即可，示例逻辑如下：

// 假设邮编服务的选中回调为onAddressSelected
onAddressSelected(selectedAddress) {
  this.contact.postcode = selectedAddress.postcode
  this.contact.town = selectedAddress.town
  // 其余地址字段同理逐一赋值
}

该方案逻辑最直观，运行也最稳定，没有额外的监听开销。

方案2：填充完成后手动触发input事件 #

如果无法获取到邮编服务的选中回调，可以在确认地址填充完成后，手动给对应输入框触发input事件，触发v-model的同步逻辑：

// 获取邮编输入框元素
const postcodeInput = document.getElementById('postcodeFormField')
// 手动触发input事件，通知v-model更新
postcodeInput.dispatchEvent(new Event('input'))
// 其余需要同步的地址字段也按相同逻辑处理即可

方案3：自定义指令统一处理批量字段 #

如果有大量地址字段都需要处理自动填充同步问题，可以封装全局自定义指令，自动监听输入框value属性的变化，主动触发同步：

// 注册全局自定义指令
Vue.directive('auto-fill-sync', {
  bind(el) {
    // 监听元素value属性的变化
    const observer = new MutationObserver(() => {
      el.dispatchEvent(new Event('input'))
    })
    observer.observe(el, { 
      attributes: true, 
      attributeFilter: ['value'] 
    })
    // 存储observer实例，卸载时销毁
    el._fillObserver = observer
  },
  unbind(el) {
    el._fillObserver.disconnect()
  }
})

使用时仅需要给对应输入框加上指令即可：

<input 
  name="postcode" 
  v-model="contact.postcode" 
  v-auto-fill-sync
  type="text" 
  class="form-control" 
  id="postcodeFormField" 
  placeholder="SW7 3RX" 
  required
>

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