Какое событие следует использовать для реакции, когда пользователь заканчивает вводить текст в поле поиска в Vue. js? - PullRequest
Новая
       15

Какое событие следует использовать для реакции, когда пользователь заканчивает вводить текст в поле поиска в Vue. js?

1 голос
/ 04 августа 2020

У меня есть текстовое поле (взято из библиотеки vuetify), которое используется для фильтрации некоторой таблицы в моем приложении. 

<v-text-field
  style="min-width: 300px;"
  v-model="filterString"
  label="Search" />

Принцип работы прост - каждый раз, когда пользователь предоставляет новое значение фильтра , содержимое таблицы следует обновить. Нет кнопки отправки или чего-то подобного. Фильтрация реализована на стороне сервера, поэтому каждое обновление требует отправки запроса в мой API. Я использую наблюдатель Vue. js для отправки запроса при обновлении строки фильтра. 

watch: {
  async filterString() {
    // some logic containing communication with my api
  },
},

Предположим, что пользователь моего приложения вводит строку из 10 букв в поле поиска. Затем мое приложение отправляет 10 запросов к моему API, игнорируя тот факт, что первые девять из них бесполезны. И это моя проблема. Следует ли мне использовать часы и отправлять запрос только по истечении определенного времени? Есть ли какое-то событие, которое запускается, когда пользователь заканчивает вводить текст, на которое мне нужно подписаться? Как отправить запрос только тогда, когда пользователь закончит печатать в моем ящике? Спасибо за любой ответ.

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

То, что вы ищете, называется противодействием. И это просто таймер, который ждет, когда вы перестанете нажимать клавиши.

Вот быстрый способ сделать это с помощью loda sh debounce

template: 

    <input
            :value="input"
            @change="evt=>textChange(evt.target.value)"
            @input="evt=>textEntry(evt.target.value)"               
    />

javascript:

Импорт: 

 import { debounce } from 'lodash'

Определение: 

 model: {
    prop: 'input',
    event: 'input'
  },
 props: {
    input: {
      default: '',
      type: String
    },
    debounce: {
      default: -1,
      type: Number
    }
  },
 methods: {
    textChange (value) {
        this.$emit('input', value)
      }
    },
    textEntry (value) {
      // This is to cover for situations where the change event runs first
      if (value.toUpperCase() === this.input.toUpperCase()) return
      if (this.debounce >= 0) {
        this.emitValue(value)
      } else {
        this.$emit('input', value)
      }
    }
  },
  async mounted () {
    this.emitValue = debounce(value => {
      this.$emit('input', value)
    }, Math.abs(this.debounce))
    await this.$nextTick()
    this.textChange(this.input) // apply whatever was loaded, and allow bindings to run
  }
0 голосов
/ 04 августа 2020

Вы все еще можете использовать событие @change Vuetify в сочетании с инструментом устранения неполадок. Это помешает вам выполнять несколько «бесполезных» запросов, как вы сказали.

Вы можете:

  • Использовать пакет npm, например этот
  • Сделай сам (возможно, см. эту ветку , если нужна помощь)
...