Vuetify搜索框按键触发搜索仅发送首字符，应选用什么事件？

问题根因 #

1. 事件传参错误：@keyup.native="updateStore"默认传入的参数是原生键盘事件对象，而非输入框的当前输入值，你定义的updateStore中接收的value实际是事件对象，不是你输入的完整内容，导致取值错误。
2. 触发时机不匹配：keyup事件在按键抬起时立即触发，此时v-model的双向绑定还未完成值的更新，快速输入时只会拿到更新前的旧值。
3. 修饰符使用错误：Vuetify的v-text-field已经封装了input、keyup等常用事件，不需要加.native修饰符，加了之后会直接绑定到组件根DOM的原生事件，和组件内部的更新逻辑不同步。

修复方案 #

方案1：复用v-model的setter逻辑（最简实现） #

你已经为deviceId定义了setter，set操作本身就会调用store.selectDevice，不需要额外绑定按键事件，直接删除@keyup.native配置即可，输入框值变化时setter会自动执行：

<template>
  <v-form
    ref="form"
  >
    <v-text-field
      v-model="deviceId"
      label="Search"
      required
      clearable
      name="searchInput"
    />
  </v-form>
</template>

方案2：使用@input事件显式触发 #

如果需要单独的事件处理逻辑，替换为Vuetify内置的input事件即可，该事件会在值更新后触发，且直接返回当前输入的完整值：

<!-- 模板修改 -->
<v-text-field
  v-model="deviceId"
  label="Search"
  required
  clearable
  name="searchInput"
  @input="updateStore"
/>

// 脚本部分不需要额外修改，@input传入的参数就是当前完整输入值
updateStore (value: string): void {
  console.log(value)
  store.selectDevice(value)
}

额外优化建议 #

实时搜索场景建议增加防抖处理，避免短时间输入多个字符时发送大量无效请求，示例如下：

import { debounce } from 'lodash'
// 输入停止300ms后再触发请求，可按需调整时间
updateStore = debounce((value: string): void => {
  console.log(value)
  store.selectDevice(value)
}, 300)

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