Vuetify search on keypress-CodePudding

I have a basic text field which on keypress would send the search request to backend.

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

and this is the script

  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)
  }

The problem is it doesn't send request for all the characters typed in the search. So if I type 'ping', query only sends query=p. However, if I copy paste the string in the search bar, then it sends query=ping.

Not sure which vueitfy event to use or if the template structure is incorrect?

CodePudding user response：

Try to use input event instead of keyup :

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