結論
@keyup
で呼び出す関数をlodash
のdebounce
でnミリ秒後指定する。
Vue.jsでkeyupイベントで発火
さて、keyupやkeydownで発火させるのはかんたんだ…。
でも入力中に毎回発火させるのは嫌だな〜
<template>
<div>
<input @keyup="doAlert">
<div>
</template>
<script>
export default {
name: 'hogeComponent',
methods: {
doAlert() {
alert('アラートじゃ!');
}
}
}
</script>
数秒後に発火させたい & 時間内にもう一度イベント発火が起こればカウントリセット
lodashのdebounceに頼る
lodashをインストール(npmでもOK)
yarn add lodash
- lodashをimportする
- doAlertメソッドを
_.debounce()
で指定ミリ秒後呼び出しにする
<template>
<div>
<input @keyup="doAlert">
<div>
</template>
<script>
import _ from 'lodash'
export default {
name: 'hogeComponent',
methods: {
doAlert: _.debounce(function() {
alert('アラートじゃ!');
}, 500) // 500ms指定
}
}
</script>