VueJs and Axios : Trigger after input with a delay + cancel previous

Question

So on my website I have a input box

<SearchBox v-model="searchTerm"/>

Which I watch and call an url via 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);
      });
    }
  }

Is there a way to delay the call and cancel previous ones? So if someone types something in, when they pause for 1 second, it then calls the server and doesn't call it for every letter they enter.

A simple 1-second delay would still queue up the calls.

You would usually use a debounce for something like that. Try taking a look at [lodashes debounce](https://lodash.com/docs/4.17.10#debounce) function which you can [download from npm](https://www.npmjs.com/package/lodash.debounce) — craig_h, Oct 08 '18 at 13:28
In addition: https://stackoverflow.com/questions/42199956/how-to-implement-debounce-in-vue2 — Philip, Oct 08 '18 at 14:51

Boussadjra Brahim · Answer 1 · 2019-08-21T10:18:12.650

You could use the lazy modifier as follows :

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

So when you leave the text field you could watch the data and call 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>

VueJs and Axios : Trigger after input with a delay + cancel previous

1 Answers1