Vue: Extending object syntax of v-on to support modifiers

[brianwhu]

What problem does this feature solve?

The object syntax of the v-on directive is vital in achieving conditional binding of event listeners, as shown in the discussions at https://github.com/vuejs/vue/issues/7349.

<div v-on="{ mouseover: condition ? handler : null }">

However, the current object syntax does not allow modifiers.

This feature request suggest that we extend the object syntax in the following way to allow modifiers.

<div v-on="{ click: { left: { prevent: condition ? leftClickHandler : null } },  mouseover: { stop: mouseoverHandler } }">

The above example would conditionally install leftClickHandler on "click.left.prevent" and mouseoverHandler on "mouseover.stop".

The embedded object notation is also conceptually consistent with the dot-notation already adopted in both function and inline syntax.

What does the proposed API look like?

The proposed v-on object syntax would like like this, which is an extension of the current syntax.

<div v-on="{ click: { left: { prevent: condition ? leftClickHandler : null } },  mouseover: { stop: mouseoverHandler } }">

[andrewsm80]

I think the below syntax would be better (no object embedding):

<div v-on="{ 'click.left.prevent': condition ? leftClickHandler : null,  'mouseover.stop': mouseoverHandler }">

[posva]

This is possible today by using https://vuejs.org/v2/guide/render-function.html#Event-amp-Key-Modifiers

<button v-on="{ '~click': () => foo = new Date() }">Trigger only once</button>

[Zsavajji]

Hi! I'm sorry to bring up such an old issue, but with the update to 2.6.11 i found that a thing related to this i used a lot in my project broke down.
I'm attaching v-on:click and v-on:click.native to a <component tag, which can dynamically be a Vue component or a DOM element.
This now emits warnings, flooding logs and affecting development performance.
I tried to attach those listeners dynamically but there's no object syntax for the .native modifier. How can i handle this?

[posva]

@Zsavajji if you think you found a bug please file a new issue with a boiled down reproduction

[Zsavajji]

Not sure if it is a bug or expected behavior. Will open a bug report tomorrow :)

[magistr4815]

Hello.
I tried to do it like this, but it does not work.

// not working
v-on="{ [condition ? 'click.stop' : 'click'] : eventfunc }"
// or
// error
v-on="{ condition ? 'click.stop' : 'click' : eventfunc }"

Is there any other solution?
Thanks in advance!

[madmod]

This does not seem to work for all event methods. Only those which have the proprietary prefixes.

[Glandos]

This is possible today by using vuejs.org/v2/guide/render-function.html#Event-amp-Key-Modifiers

<button v-on="{ '~click': () => foo = new Date() }">Trigger only once</button>

This seems nice, even if undocumented. However, the .native modifier has no prefix, and seems unsupported with the object syntax. Is there any workaround for now?

[MarcelloTheArcane]

There doesn't seem to be an event amp key modifier for .native, which is what I need.

[Tyler-RCSD]

I needed .prevent

To work around this I did:
<div @contextmenu="condition ? ($event.preventDefault(), handler($event)) : null">

If the object syntax for v-on included .prevent I would probably be able to bind conditionally, which would be my preference.