如何使用Vue.js去抖過濾器？

我試圖按照Vue.js docs使用debounce過濾器，所以我可以防止在用戶鍵入輸入時觸發Ajax功能。在過去，我使用setTimeout來手動阻止在每個字母輸入後發送請求，並使用重置延遲，但我想用Vue.js的方式來完成。如何使用Vue.js去抖過濾器？

這裏是我的嘗試：

<input 
v-model="myInput" 
v-on="keyup: someAjaxFunction | debounce 500" 
>

沒有實例在文檔中給出專門針對此過濾器。我甚至把過濾器放在正確的地方？

防抖動

此過濾器只與V系列

此過濾器可以帶一個可選的參數

包裹處理程序去抖它爲x毫秒，其中X 是參數。默認值是300ms。被去抖動的處理程序將被延遲，直到在呼叫時刻之後至少經過了X毫秒;如果在延遲時間段之前再次調用處理程序，則將延遲時間重置爲 X ms。

我也試過這樣：（因爲文檔提到「包裹處理...」）

<input 
v-model="myInput" 
v-on="keyup: debounce(someAjaxFunction, 500)" 
>

我真的可以用一個例子。

請注意，這個問題適用於Vue.js v1;在v2中刪除了去抖動過濾器（[details]（https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed）） –

你的第一個例子是正確的：

<input v-model="myInput" v-on="keyup: someAjaxFunction | debounce 500">

隨着Vue.js 1.0.0-beta.x，新的語法是：

<input v-model="myInput" on-keyup="someAjaxFunction | debounce 500">

2015-09-07 17:36:39

在我的第一個示例中，我無論我輸入多快/多快，我都會在每個鍵盤上啓動ajax功能。還有什麼我可以錯過？ –

我必須有別的錯誤;我已經在jsFiddle中測試過了，第一個例子中的語法是可用的。 http://jsfiddle.net/tpgcsdq9/1/ –

防抖動濾波器已經removed。

使用lodash’s debounce（或可能節流）直接限制調用昂貴的方法。您可以實現如下所示的預期結果：

<input v-on:keyup="doStuff"> 

methods: { 
    doStuff: _.debounce(function() { 
    // ... 
    }, 500) 
}

2018-02-21 18:05:30

回答