[Vuejs]-VueJs and Axios : Trigger after input with a delay + cancel previous

by

3👍

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>

Leave a comment