VueJs и Axios: запуск после ввода с задержкой + отмена предыдущего

Question

Так что на моем веб-сайте у меня есть поле ввода

<SearchBox v-model="searchTerm"/>

, которое я смотрю и вызываю URL через Axios

watch: {
    searchTerm: function() {
      axios
      .get("https://robotic.buzz/skynet/search/" + searchTerm)
      .then(response => {
        // JSON responses are automatically parsed.
        this.results = response.data;
      })
      .catch(e => {
        this.errors.push(e);
      });
    }
  }

Есть ли способ отложить вызов иотменить предыдущие?Поэтому, если кто-то что-то печатает, когда он делает паузу в течение 1 секунды, он затем вызывает сервер и не вызывает его для каждой вводимой буквы.

Простая задержка в 1 секунду по-прежнему ставит в очередь вызовы.

Answer 1

Вы можете использовать модификатор lazy следующим образом:

 <input type="text"  v-model.lazy="searchTerm" />

Поэтому, когда вы покидаете текстовое поле, вы можете просматривать данные и вызывать axios

new Vue({

  el: '#app',
  data(){
  return{
  searchTerm:''
  }
  }
  ,
  watch: {
    searchTerm: function(val) {
    console.log(".")
      axios
      .get("https://robotic.buzz/skynet/search/" + val)
      .then(response => {
        // JSON responses are automatically parsed.
        console.log(response.data)
      })
      .catch(e => {
        this.errors.push(e);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Conversations -->

<div id="app">

<input type="text"  v-model.lazy="searchTerm" />

</div>