[解決済み】Vue2でデバウンスを実装するには？

質問

Vueのテンプレートに簡単な入力ボックスがあるのですが、以下のようにdebounceを使いたいと考えています。

<input type="text" v-model="filterKey" debounce="500">

しかし debounce プロパティが Vue 2 で非推奨となった . 推奨は、 "use v-on:input + 3rd party debounce function"とだけ書かれています。

どのように正しく実装するのですか？

を使って実装してみました。 ロダッシュ , v-on:input と vモデル が、余分な変数なしで可能かどうか疑問に思っています。

テンプレートで

<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 のプロップスです。

解決方法は？

私は デバウンス NPMパッケージで、以下のように実装しています。

<input @input="debounceInput">

methods: {
    debounceInput: debounce(function (e) {
      this.$store.dispatch('updateInput', e.target.value)
    }, config.debouncers.default)
}

使用方法 ロダッシュ と質問の例にあるように、実装は次のようになります。

<input v-on:input="debounceInput">

methods: {
  debounceInput: _.debounce(function (e) {
    this.filterKey = e.target.value;
  }, 500)
}