javascript - 如何使用 Vue.js 去抖过滤器？

Question

我正在尝试根据 Vue.js docs 使用 debounce 过滤器所以我可以防止在用户输入输入时触发 Ajax 函数。过去，我曾使用 setTimeout 手动阻止在输入每个字母后发送请求并使用重置延迟，但我想以 Vue.js 的方式进行。

这是我尝试过的:

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

文档中没有专门针对此过滤器给出示例。我是否将过滤器放在了正确的位置？

debounce

this filter only works with v-on

this filter takes one optional argument

Wrap the handler to debounce it for X milliseconds, where X is the argument. Default is 300ms. A debounced handler will be delayed until at least X ms has passed after the call moment; if the handler is called again before the delay period, the delay poriod is reset to X ms.

我也试过这个:(因为文档提到“包装处理程序......”)

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

我真的可以举个例子。

Answer 1

去抖动滤波器已removed .

使用lodash’s debounce (或可能限制)直接限制调用昂贵的方法。您可以像这样实现预期的结果:

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

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

来自 documentation .