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

Question

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

这是我尝试过的：

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

文档中没有专门针对此过滤器的示例。我什至把过滤器放在正确的地方了吗？

去抖动

此过滤器仅适用于 v-on

这个过滤器接受一个可选参数

包装处理程序以使其去抖 X 毫秒，其中 X 是参数。默认为 300 毫秒。一个去抖动的处理程序将被延迟，直到调用时刻之后至少 X 毫秒；如果在延迟时间之前再次调用处理程序，则延迟时间重置为 X ms。

我也试过这个：（因为文档提到“包装处理程序……”）

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

我真的可以举个例子。

原文由 Douglas.Sesar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的第一个例子是正确的：

 <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">

原文由 Samuel De Backer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

去抖过滤器已被 删除。

使用 lodash 的 debounce （或者可能是 throttle）直接限制调用昂贵的方法。你可以像这样达到预期的结果：

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

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

来自 文档。

原文由 Vignesh Manogar 发布，翻译遵循 CC BY-SA 4.0 许可协议