Nuxt框架下Android端输入框实时触发筛选事件问题问询

问题根因 #

安卓原生输入法在拼音/五笔等带联想的输入模式下，未完成选词时不会触发input事件，也不会同步更新v-model绑定值，只有按下空格/回车确认选词后才会同步数据，这就是首次输入必须按确认键才会触发筛选的核心原因。按下确认后输入法退出临时组合输入模式，后续输入就可以实时触发事件。

解决方案 #

方案1：新增组合输入事件监听（兼容性最好，适用于所有输入场景） #

直接监听输入法组合输入结束事件，和原有input事件配合即可覆盖所有输入场景，修改输入框代码如下：

<input
  v-model="searchValue"
  type="text"
  @input="filterStories"
  @compositionend="filterStories"
/>

如果需要拼音输入过程中就实时筛选，不需要等用户选词确认，可以进一步修改为监听组合输入更新事件，同步读取输入框实时内容：

<input
  v-model="searchValue"
  type="text"
  @input="filterStories($event)"
  @compositionupdate="filterStories($event)"
  @compositionend="filterStories($event)"
/>

同步修改筛选函数，优先读取事件中的实时输入值：

methods: {
  filterStories(e) {
    // 优先取输入框实时值，兜底用v-model绑定值
    const currentValue = e ? e.target.value : this.searchValue
    this.searchValue = currentValue // 同步绑定值，保证数据一致
    if (this.stories.length) {
      const filtered = this.stories.filter(story => 
        story.name.toLowerCase().includes(currentValue.toLowerCase())
      )
      this.filteredStories = currentValue ? filtered : []
    }
  }
}

方案2：禁用输入法联想预测（修改成本最低，适合纯英文/数字搜索场景） #

给输入框增加属性关闭输入法的联想、拼写检查功能，强制输入内容直接同步到输入框，无需选词确认：

<input
  v-model="searchValue"
  type="text"
  @input="filterStories"
  autocomplete="off"
  autocorrect="off"
  spellcheck="false"
/>

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