Vue2でデバウンスを実装する方法は？

Question

私はVueのテンプレート内の単純な入力ボックスを持っていると私はこのように、多かれ少なかれデバウンスを使用したい：debounceプロパティがdeprecated in Vue 2てきましたが

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

。この勧告では、「v-onを使用する：入力+サードパーティのデバウンス機能」としか記載されていません。

どのように正しく実装していますか？

私はlodash、V-に使用してそれを実装しようとしました：入力と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) 
} 

filterkeyは次にcomputed小道具に後で使用されます。

Answer 1

私はdebounce NPMパッケージを使用して、次のように実装されています：問題のlodashと例を使用して

<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) 
} 

Answer 2

私は受け入れられた答えの前にこの回答を掲載しました。 が正しくありません。これは、 質問の解決策からの一歩です。私は受け入れられた質問を編集して、著者の実装と使用した最終実装の両方を示しました。テンプレートで

：スクリプトで

<input type="text" v-on:input="debounceInput" v-model="searchInput"> 

：

watch: { 
    searchInput: function() { 
    this.debounceInput(); 
    } 
}, 

---

コメントに基づいて

とlinked migration document、私は、コードにいくつかの変更を加えました

そして、フィルタキーを設定するメソッドは同じままです：

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

1つの以下の呼び出し（ちょうどv-model、およびないv-on:input）があるようにこれが見えます。