Vue: Multiple events in single v-on similar to v-bind="object"

[crswll]

What problem does this feature solve?

It could make binding a bunch of events to an element more clear. It would also make v-bind and v-on work similarly.

What does the proposed API look like?

v-on="{ 'click.shift': methodOne, 'keyup.left': methodTwo, 'keyup.right.stop': methodTwo }"

This way we can create a computed list that returns a hash if there's too many event listeners / repetitive events.

I can get something close with a directive but without the modifiers it's not nearly as useful. It also doesn't remove the events but it was a quick attempt.

https://jsfiddle.net/crswll/2fL6gtbg/4/

[nickmessing]

@crswll, that means that we need to parse all event modifiers in the vue itself as opposite to template compiler at the moment, are you sure that is a good idea?

[crswll]

I don't know enough about the Vue internals to answer that well. I guess attempting this feature on my own would be a good way to figure it out.

[lonelyclick]

I think it's too complicated, do we also need to consider custom events?

[ghost]

IMO if you do this it should be a separate directive (like v-on-many), but not the native v-on rewritten itself. The reason is v-on-many (if it exists) should also handle custom events as mentioned by @lonelyclick (otherwise there's little sense having such a bulk directive), and all this additional inner-library work is redundant for 99% v-on use cases.

[lukeed]

I think this could be a good fit (and avoid any rewrites) if we followed @wostex's suggestion. Although, a v-events or @events would make most sense in my mind.

This could open the door for passing around event names+handlers, which would shortcut the (sometimes) repetitive template assignments.

[nickmessing]

@lukeed, I still think this should not be a part of Vue, it should be a separate directive that you can use.

[lukeed]

I not opposed to that idea either 👍

[Kingwl]

the modifier has been parsed when template compiling
if we support modifier we should support parse modifier at runtime
IMO this is not a good idea😅

[ghost]

I've tried to create such a directive, here's the code: link

Working sample on jsfiddle: link

It should work fine with native events, as described in the question.

P. S. I don't know how to add support for Vue-created custom events though. Maybe someone can point me into right direction?

[yyx990803]

This is partially implemented in 11614d6 - however, this syntax is introduced primarily for making it easier to proxy events in components. Modifiers for this syntax introduce too much runtime complexity and is not supported.

[vhoyer]

So how do I bind .native events using this technique? like, I tryed using v-on.native="data.nativeOn" and it doesn't seem to work.

I even tried v-native-on="data.nativeOn" but it doesn't work either :sweat_smile:

Tried v-on="{ ...listeners, data.nativeOn }", also no success

the only thing I could do to manage it to work was to do manually ;-;

v-on="listeners"
@click.native="listeners.click" // cuz if I will need to do this, I might as well just treat click as a component event 

[victorwpbastos]

Would be great if we could apply modifiers too.

[KarmaBlackshaw]

So how do I bind .native events using this technique? like, I tryed using v-on.native="data.nativeOn" and it doesn't seem to work.

I even tried v-native-on="data.nativeOn" but it doesn't work either 😅

Tried v-on="{ ...listeners, data.nativeOn }", also no success

the only thing I could do to manage it to work was to do manually ;-;

v-on="listeners"
@click.native="listeners.click" // cuz if I will need to do this, I might as well just treat click as a component event 

any update on this ?