[SOLVED] Am I using debounce incorrectly?

[ssuess]

I am trying to get a function attached to an input to only run after the user has finished typing, but not sure this is the correct way to go about this. Currently I have an input that looks like this:

<q-input v-model="search" @input="showingDebounce()" ></q-input>

and script that looks like this:

import { debounce } from 'quasar'
export default {
  data () {
    return {
      search: '',
      showing: false
    }
  },
  methods: {
    showingDebounce () { debounce(function () { this.showingOn() }, 1000) },
    showingOn () { this.showing = true }
  }
}

ideally showingDebounce() should (I thought) wait for the user input to have stopped for 1000 ms, then run the showingOn() function, but nothing is happening.

Am I doing something wrong here? Thanks!

[ssuess]

Ok, I think I figured this out. I had to attach a watcher to the search and run the debounce function there. @input was the wrong place apparently.

[tof06]

Hi,

Since you’re debouncing on q-input model change, I think you can also use debounce=1000 prop of this component (https://quasar.dev/vue-components/input#Debouncing-model)

[ssuess]

omg, thanks! That is way easier than the contortions I had to go through!