Delay directive for search/filter inputs. Tip #28

For search and filter inputs, I like to delay the execution until the user pauses typing after 500ms, for example, because usually those actions are slow (remote request or processing intensive).

In this post, I explained how to achieve that using lodash.debounce. But as soon as you need for multiple inputs in your app, makes sense to create a custom component, or in this case a directive: v-debounce.

The idea is to capture the input "oninput" event, wait, then dispatch it as another event "onchange", this way I can capture using v-model.lazy.