[SOLVED] Am I using debounce incorrectly?

  • 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!

  • 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.

  • 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)

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

Log in to reply