https://github.com/coreusa/v-debounce
Vue2 debounce directive for inputs.
https://github.com/coreusa/v-debounce
debounce directive input vue2 vue2-directive vuejs2
Last synced: 2 months ago
JSON representation
Vue2 debounce directive for inputs.
- Host: GitHub
- URL: https://github.com/coreusa/v-debounce
- Owner: Coreusa
- Created: 2017-08-23T07:14:15.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2022-07-06T08:07:37.000Z (almost 4 years ago)
- Last Synced: 2025-08-19T15:19:32.298Z (10 months ago)
- Topics: debounce, directive, input, vue2, vue2-directive, vuejs2
- Language: JavaScript
- Size: 14.6 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
Debounce directive for Vue2 to debounce input typing. Forked originally from https://github.com/vuejs-tips/v-debounce
Updated to include support for IE.
# Update
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: {
debounce
}
}
```
### 0.2.0 (Current)
```
// In your component
import { directive } from 'v-debounce'
export default {
name: 'List',
directives: {
debounce: directive
}
}
```
## Install
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
}
}
```
## Usage
**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
import { directive } from 'v-debounce'
export default {
name: 'example',
data () {
return {
delay: 1000,
term: '',
}
},
watch: {
term () {
// Do something with search term after it debounced
console.log(`Search term changed to ${this.term}`)
}
},
directives: {
debounce: directive
}
}
```
**Report issues:**
https://github.com/coreusa/v-debounce/issues
### License
This repository is licensed under a [MIT license](https://github.com/git/git-scm.com/blob/main/MIT-LICENSE.txt).