Vue v-model在移动端Chrome输入无响应问题求助

我之前也碰到过一模一样的问题！移动端Chrome的输入法机制确实坑，尤其是处理中文输入的时候，常规的键盘事件经常“失踪”。给你几个亲测有效的解决办法：

1. 用@compositionupdate捕获实时输入 #

这个事件专门针对输入法的组合输入场景（比如选候选词的过程），能实时拿到输入的内容：

<input v-model="message" @compositionupdate="log" @compositionend="log" placeholder="Edit">
<p>Edited: {{ message }}</p>

搭配@compositionend可以覆盖输入完成后的最终状态，不管是实时输入还是选候选词，都能触发你的log方法。

2. 绑定原生input事件 #

有时候Vue封装的事件在移动端有兼容性问题，试试加上.native修饰符直接监听原生DOM事件：

<input v-model="message" @input.native="log" placeholder="Edit">
<p>Edited: {{ message }}</p>

这个方法在很多移动端兼容性场景下都能救急。

3. 手动绑定DOM事件（极端情况） #

如果上面的方法都没效果，那就直接绕开Vue的事件绑定，在组件挂载后手动给input元素加监听：

<template>
  <input ref="inputBox" v-model="message" placeholder="Edit">
  <p>Edited: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    const inputEl = this.$refs.inputBox
    inputEl.addEventListener('input', (e) => {
      this.log(e.target.value)
      // v-model会自动同步值，这里只需要处理你的业务逻辑就行
    })
  },
  methods: {
    log(value) {
      console.log('当前输入值:', value)
    }
  }
}
</script>

为什么会出现这个问题？ #

移动端Chrome的输入法在处理需要候选词的输入（比如中文、日文）时，会先触发compositionstart，然后在选词过程中只触发compositionupdate，直到你选完词才会触发常规的input或keyup事件。Vue2的默认事件绑定没有自动处理这种时序，所以看起来像是事件没触发。

另外，建议你检查下Vue版本，尽量用2.6.x的最新稳定版，旧版本可能存在这类移动端兼容性bug。

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