vue-ts-debounce

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:

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.