[解決済み】Vue2でデバウンスを実装するには?
2022-04-10 11:13:55
質問
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)
}
関連
-
Vue.js学习的第一天
-
[解決済み] Nuxt.jsで "window is not defined "と表示される。
-
[解決済み] 小道具」の変化の聞き取り方
-
vue springboot reports error DOMException: XMLHttpRequest'の'send'の実行に失敗しました。ロードに失敗しました
-
[解決済み】vuexからストアの値を監視する方法は?
-
[解決済み】Vueのデータからhrefに値を渡すには?
-
[解決済み] Vueプロジェクトにおけるviewsフォルダとcomponentsフォルダの違いは何ですか?
-
[解決済み] Javascriptの "debounce "関数について教えてください。
-
[解決済み] Vue.js:各コンポーネントインスタンスにユニークなIDを設定するには?
-
[解決済み] Vueの「エクスポートデフォルト」と「新しいVue」の比較
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] npm run dev」「npm run watch」はどのようなスクリプトですか?
-
未定義のプロパティ '0' を読み取ることができません。
-
_this.axios is not a functionの原因と解決方法
-
[解決済み] Vue.jsでグローバルフィルタを大量に追加する方法は?
-
[解決済み】名前空間が設定された2つのVuexモジュール間でアクションをディスパッチする方法はありますか?
-
[解決済み】Vue2でデバウンスを実装するには?
-
[解決済み】他のアクションの中からアクションを呼び出す
-
[解決済み】Vue.jsの別ページへのリダイレクトについて
-
[解決済み】Vuejs:ルート変更時のイベント
-
[解決済み] Vue.js:各コンポーネントインスタンスにユニークなIDを設定するには?