Vue: How to extend exist directive with new modifiers

Viewed 183

How extend exist directive like: v-on with my custom modifiers.
For example provided debounce ability with .deb modifiers.

For example:

<btn v-on:click.deb="myFn"> click me </btn>

So basically in this case it needed to capture myFn before it goes to addEventListener and warp it with debounce function. And then move it to regular v-on directive to continue the process.

How could I achieve that ?

I know I can create my-new-directive that do the whole process but then is not generic.
And it easier to warp the function in the source and done with that.

But more impotent I want to learn the Vue way to how to extend exist directive.


After digging in the old docs I see that in the past Vue achieve debounce with filter

<btn v-on:click="myFn | debounce 300"> click me </btn>

But that removed from the current version ( 2.x ) for preferred warping the function in the source. I personally less like it because it takes more scrolled to warp big function

0 Answers
Related