Vue 3 v-model在Android Chrome中无法正常更新的问题排查

问题现象 #

开发的输入选择混合组件支持输入关键词实时过滤下拉列表，多数设备上表现正常，但Android设备的Chrome浏览器存在异常：输入内容时列表无更新，仅按下空格键后才会变化，排查发现v-model绑定的searchTerm ref值无法实时更新。

相关代码 #

<script setup>代码 #

const props = defineProps([ 'items', 'searchBy' ])
const searchTerm = ref('')

const itemsToShow = computed(() => {
    if (props.items) {
      if (searchTerm.value) {
        return props.items.filter(el => {
          if (props.searchBy) {
            return el[props.searchBy].toUpperCase().indexOf(searchTerm.value.toUpperCase()) > -1  
          }

          return el.toUpperCase().indexOf(searchTerm.value.toUpperCase()) > -1
        })
      } else {
        return props.items
      }
    } else {
      return []
    }
})

模板代码 #

<input 
  type="text" 
  class="input"
  v-model="searchTerm"
  placeholder=" " 
/>
<div class="items-list">
  <div 
    v-for="item in itemsToShow" 
    :key="item" 
    @click="() => handleAdd(item)" 
    class="item text"
  >
    {{ item }}
  </div>
  <div 
    v-if="!itemsToShow.length" 
    class="text"
  >
    No items match searched term
  </div>
</div>

解决方案 #

1. 手动监听input事件强制更新值 #

Android Chrome对v-model的响应可能存在延迟，手动绑定input事件直接赋值，绕过自动绑定的延迟问题：

修改模板中的input标签：

<input 
  type="text" 
  class="input"
  :value="searchTerm"
  @input="searchTerm = $event.target.value"
  placeholder=" " 
/>

也可以保留v-model同时添加@input做双重保障，确保值实时同步。

2. 优化过滤逻辑（可选） #

将indexOf替换为更直观的includes，同时显式声明依赖确保响应式追踪：

const itemsToShow = computed(() => {
  const term = searchTerm.value
  const items = props.items
  if (!items) return []
  
  if (!term) return items
  
  return items.filter(el => {
    const targetContent = props.searchBy ? el[props.searchBy] : el
    return targetContent.toUpperCase().includes(term.toUpperCase())
  })
})

3. 修正v-for的key值 #

如果item是对象类型，直接用item作为key可能导致Vue无法正确识别元素变化，建议使用对象的唯一标识（如item.id）：

<div 
  v-for="item in itemsToShow" 
  :key="item.id" <!-- 替换为item的唯一属性 -->
  @click="() => handleAdd(item)" 
  class="item text"
>
  {{ props.searchBy ? item[props.searchBy] : item }}
</div>

原因分析 #

Android Chrome的输入事件处理机制与其他浏览器存在差异，第三方输入法的事件触发延迟可能导致v-model的自动更新失效，手动监听input事件直接赋值可以强制触发Vue的响应式更新，确保searchTerm实时同步输入内容。

内容的提问来源于stack exchange，提问作者whit3.oc7opus