[FIXED] How to do "submit form after user stop typing" in vuejs2

Issue

I have a search module in which: when a user stop typing it should search the name.

What I think the solution is to do a timeout when a user keyup. reference

<input type="text" @keyup="textSearch($event)">

textSearch(e){
    var timer;
    clearTimeout(timer);

    timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

The code were all working, the problem is why when I type 3 character in just 1 second it pops out 3 alerts? I expect there should be one pop-out since it waits for 2.5 seconds.

Is there something wrong with the code? Need help Sirs

Solution

Here is a solution:

setTimeout is fine -- alternatively, you can use debounce Vue-debounce

<input v-debounce:400ms="myFn" type="text" />

<script>
export default {
  methods: {
    myFn(val) {
      console.log(val) // => The value of the input
    }
  }
}
</script>

Answered By - Hardik Raval