Vue: Proper use of debounce property

[jakeryansmith]

Is debounce supposed to throttle the keyup event on a text input? If so I'm having trouble getting this to work. Debounce works fine throttling the model update, but the keyup event still fires as soon as a key is released. I'm not sure if this is supposed to work this way or not. Thanks!

[yyx990803]

The docs could use some improvement. The debounce property does not debounce any DOM events, it only debounces model updates. Since you are already using v-model, you should think in terms of "reacting to model changes" rather than "reacting to DOM events". So, use a watcher to watch the change of the bound value:

<input v-model="someValue" debounce="500">

data: {
  someValue: ''
},
watch: {
  someValue: function (value) {
    // this callback is debounced
  }
}

And please use vuejs/Discussion for questions - this repo's issue tracker is for bugs and features only.

[youanden]

@yyx990803 Is this still the case? I tried doing this and the debounce didn't apply.

[sirlancelot]

http://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed

[youanden]

@sirlancelot thanks

[deepaksisodiya]

Since debounce is removed
Docs should be updated here as well https://012.vuejs.org/guide/forms.html#Input_Debounce

[sirlancelot]

@deepaksisodiya If you look at the URL you pasted, you'll notice it's 012.vuejs.org. That is the documentation for a pre-release version of Vue.js. The latest version can be found here: https://vuejs.org/v2/api/