Vueテンプレートに単純な入力ボックスがあり、多かれ少なかれこのようにデバウンスを使用したいと思います。
<input type="text" v-model="filterKey" debounce="500">
ただし、このdebounce
プロパティはVue 2では廃止されました。推奨事項には、「v-on:input +サードパーティのデバウンス機能を使用する」とのみ記載されています。
どのように正しく実装しますか?
lodash、v-on:input、v-modelを使用して実装しようとしましたが、追加の変数なしで実行できるかどうか疑問に思っています。
テンプレート:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
スクリプトで:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
フィルターキーは、後でcomputed
小道具で使用されます。