deboucne event in Vuejs decorator-syntax
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<p>Clicked {{ count }} times</p>
<button @click="onClickBtn(1, 2)">click</button>
</div>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import _debounce from 'lodash.debounce'
const debounce = (wait, lodashOptions) => (target, key, descriptor) => {
const callback = descriptor.value;
if (typeof callback !== 'function') {
throw new SyntaxError('Only functions can be debounced');
}
var fn = _debounce(callback, wait, lodashOptions)
return {
...descriptor,
value(...args) {
fn.call(this, ...args)
}
};
}
@Component({
name: 'app'
})
export default class App extends Vue {
count = 0;
@debounce(1000, { leading: true, trailing: false })
onClickBtn() {
console.log(...arguments) // eslint-disable-line
this.count ++
}
}
</script>