Vuetify 按键搜索

Question

我有一个基本的文本字段，在按键时会将搜索请求发送到后端。

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

这是脚本

  device : string | undefined = undefined

  get deviceId () : string | undefined {
    if (this.device === undefined) {
      this.device = store.selectedDevice
    }
    return this.device
  }

  set deviceId (value : string) {
    store.selectDevice(value)
    this.device = value
  }

  updateStore (value: string): void {
    console.log(value)
    store.selectDevice(value)
  }

问题是它不会发送对搜索中键入的所有字符的请求。因此，如果我键入 'ping'，查询只会发送 query=p。但是，如果我在搜索栏中复制粘贴字符串，那么它会发送 query=ping.

不确定使用哪个 vueitfy 事件或者模板结构是否不正确？

Answer 1

尝试使用 input 事件而不是 keyup :

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

Vuetify 按键搜索

Vuetify search on keypress

javascript

typescript

vue.js

vuetify.js