Input debounce directive for Vue.js

Downloads in past


1300.2.08 months ago5 years agoMinified + gzip package size for v-debounce in KB


Debounce directive for Vue2 to debounce input typing. Forked originally from https://github.com/vuejs-tips/v-debounce Updated to include support for IE.
Thanks for all the downloads and we hope v-debounce is useful in your project(s)! The next release of v-debounce has finally arrived, and introduces some changes.

Version changes and potential breaking changes

v-debounce has a slightly changed code markup compared to earlier. The change is to allow for installing the component globally. See below for how usage has changed.

0.12 (Previously)

``` // In your component import debounce from 'v-debounce' export default { name: 'List', directives: {
} } ```

0.2.0 (Current)

``` // In your component import { directive } from 'v-debounce' export default { name: 'List', directives: {
debounce: directive
} } ```


Install the NPM package: ``` yarn add v-debounce
or if you prefer to use npm
npm install --save v-debounce ``` And then register the directive in your Vue instance, either globally or locally in a component. ```js / --- Install the directive globally --- / import Vue from 'Vue' import debounce from 'v-debounce' Vue.use(debounce) / --- Import the directive directly in the component --- / // In single file component import { directive } from 'v-debounce' export default { directives: {
debounce: directive
} } ```


Template: Add an input in your template that uses the directive. For example a search field like this: ``` ``` In your script section, customize delay and keep track of when term changes, which in this case is 1 second after input has stopped. Script: ```html v-model.lazy="term"
placeholder="Search for something"
/> ``` Report issues: https://github.com/coreusa/v-debounce/issues