Vue.js搭配Ionic 5使用时v-model等Vue内置指令失效问题咨询

问题原因 #

• Ionic 5的表单类自定义组件（如ion-input、ion-select等）触发的输入事件为ionInput，而非Vue默认v-model监听的原生input事件，同时组件的清空操作会触发独立的ionClear事件，Vue原生v-model的默认逻辑未适配这两个自定义事件，因此直接使用无响应。
• Ionic 4阶段的Vue适配方案仍处于测试阶段，事件绑定逻辑和Ionic 5正式版的@ionic/vue包实现逻辑差异较大，因此旧版本教程的方案无法适配Ionic 5。

解决方案 #

方案1：升级依赖（推荐） #

将项目中的@ionic/vue依赖升级到5.4.0及以上版本，该版本之后官方已经内置了对Vue v-model指令的全量适配，不需要额外修改代码，你原本写的v-model用法可以直接生效：

<ion-input v-model="name" type="text" placeholder="Enter name"></ion-input>
<ion-label>{{name}}</ion-label>

升级后ionInput、ionClear事件都会被v-model自动处理，不需要手动绑定事件监听。

方案2：兼容旧版本依赖 #

如果项目因整体依赖兼容性要求无法升级@ionic/vue，可以通过两种方式处理：

1. 沿用你当前的手动绑定写法，已经可以稳定实现双向绑定需求
2. 全局注册自定义指令封装适配逻辑，后续所有ion-input都可以直接用v-model，无需每次手动绑定事件，示例指令逻辑如下：

// main.js中全局注册
app.directive('model', {
  mounted(el, binding, vnode) {
    if (el.tagName === 'ION-INPUT') {
      el.value = binding.value
      el.addEventListener('ionInput', (e) => {
        vnode.props['onUpdate:modelValue'](e.target.value)
      })
      el.addEventListener('ionClear', () => {
        vnode.props['onUpdate:modelValue']('')
      })
    }
  },
  updated(el, binding) {
    if (el.tagName === 'ION-INPUT' && el.value !== binding.value) {
      el.value = binding.value
    }
  }
})

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