v-on dynamic argument doesn't work with .native modifier

[AlansCodeLog]

Version

2.6.0

Reproduction link

https://codesandbox.io/s/r749jp21o4

Steps to reproduce

I made a simple button component which does not emit any events. In the app there are three instances of it with the @click.native event bound in different way.

You can see the first button component which was bound with @click.native works and increases the counter, but the rest which use v-on and the new conditional binding syntax do not.

I thought it might have been some limitation of native events but this also happens with other modifiers, like keydown.somekey.

What is expected?

The events should be bound and all the buttons should work.

What is actually happening?

The buttons do not work. The events are not bound. Only the first button actually gets a listener attached when I inspect them with chrome's devtools.

[yyx990803]

The modifier is NOT part of the event's name/argument. The proper syntax is @[condition].native="test" - although that doesn't seem to work either 😅 so that's still a bug to fix.

Same reason that v-on cannot work that way. I believe you can do v-on.native="{ ... }" though. v-on on object does not support modifiers.

[yyx990803]

nvm, @[condition].native is working as intended. It seems CodeSandbox has trouble making use of the latest vue-template-compiler.

[AlansCodeLog]

Oh okay, thanks, I thought I might have misunderstood the syntax but I couldn't think of any other way to bind it (and it hasn't been documented yet right? unless I missed it). I had tried to treat it like a property access initially by doing @['click'] and @[true ? 'click' : undefined], but since those didn't work I assumed there was some weird parsing magic going on and it must need a single variable.

Also it's only one level deep right, they can't be chained like @[event][modifier]?

And is the reason v-on can't support modifiers that it's not implemented or is there some other limitation? I know native events are bound to the nativeOn object which as far as I know can't be set, but I don't really know why. I don't mind so long as there's some way to conditionally bind events with modifiers but the tiny differences in functionality between the syntaxes has always puzzled me.

[yyx990803]

Directive arguments and modifiers are separate concepts. Argument is the part after v-xxx: and before any modifiers. Modifiers always start with a .. The dynamic arguments feature in 2.6 applies only to the argument, not modifiers.

[bonno123]

hey @yyx990803, how can I use @[condition].native here in this codition where one condition has a modifier (v-on:keyup.enter) and another has no modifier(v-on:change)

<component 
    :is=" isCompDropdown(field) ? Dropdown : InputText"
    @keyup.enter="!isCompDropdown(field) && getUsers()"
    v-on="isCompDropdown(field) ? { change: getUsers } : {}"
/>