Package Exports

vue-ts-debounce
vue-ts-debounce/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-ts-debounce) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-ts-debounce

Debounce decorator for Vue.js 2 using vue-class-component. Based on ts-debounce.

Install

yarn add vue-ts-debounce

Usage

In the example below, increment is called at most every 500ms.


<template>
  <span>{{ value }}</span>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Debounce } from "vue-ts-debounce"

@Component
export default class MyComponent extends Vue {
  value = 0

  @Debounce(500)
  increment() {
    this.value += 1
  }
}
</script>

Options

The @Debounce decorator either accepts a number or an object. The number represents the wait time in ms between each call. The following options are available in the object:

Name	Description
`wait`	The wait time in ms.
`isImmediate`	If the first call should be immediate instead of waiting for the given duration.
`maxWait`	Call debounced function after this duration in ms, even if another call is currently in progress.

Thanks

Inspired by vue-debounce-decorator. The difference to that library is the usage of ts-debounce and the ability to use the decorator across multiple instances of the same component.