Как перенаправить и получить параметры URL

Question

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

/ search? Term = blah

Я перенаправляю передачу термина, но пока пользователь продолжаетвведите больше букв / терминов, я не могу получить эти данные. Только первый термин.

Компонент SearchForm:

this.$router.push(`/search?term=${this.term}`)

Страница поиска (nuxt)

mounted () {
   this.search(this.$route.query.term)
},
methods: {
    search (term) {
      axios.get(`https://api.com/search?search=${term}`)
        .then(res => (this.results = res.data))
    }
}

Но метод поиска вызывается только при вводе первой буквыпотому что я использую событие keyup для перенаправления на маршрут поиска. Как я могу исправить это решение, чтобы вызвать метод поиска на каждом keyup? Или есть лучший способ решить эту проблему?

Спасибо.

Answer 1

Я бы порекомендовал использовать что-то вроде функции lodash debounce () , чтобы дождаться, пока пользователь (вероятно) не закончит печатать, перед перенаправлением. Vue на самом деле имеет прекрасный пример этого в своих документах на watchers .

Если вы решите включить lodash в ваш проект (он может быть уже включен), вы можете сделать что-то вроде следующего:

created() {
  this.debouncedSearch = _.debounce(this.search, 500)
},
methods: {
  search (term) {
    axios.get(`https://api.com/search?search=${term}`)
      .then(res => (this.results = res.data))
    }
  }
},
watch: {
  search: function(term) {
    this.debouncedSearch();
  }
}

Ваша страница поиска, вероятно, будет нуждаться в собственной форме поиска / ввода, чтобы позволить пользователю продолжать уточнять свой поиск после перенаправления на страницу поиска.