Behavioural difference when using v-on on SFCs and HTML elements, on Vapor mode vs Virtual DOM

[freshnewuniquename]

So normally (non-Vapor mode) when using v-on with modifiers (E.g. .prevent.self), the modifier will work regardless of the type of element/component. So both SFCs and HTML elements will be applied with the given modifiers.

See screenshot of generated code

But on Vapor mode, modifiers attached to v-on are not applied to SFCs. I thought this was a bug, but looking at the docs, it doesn't really specify that a custom component should handle v-on the same way as plain HTML elements does (just that it will handle the component's events/emits)

So my question is that in this case, should Vapor mode try to mimic the behaviour of non-Vapor mode Vue? Even though it's not documented, as noted by the Behavior Consistency section in the release note? (Or the current implementation is an unintended feature?)

- Playground link (With cannot redefine property: class fix (Uses playground from this PR, #13382))
- Minimal reproducible link (With cannot redefine property: class fix (Uses playground from this PR, #13382))

EDIT: Added clarification for the playground URLs with fix

[freshnewuniquename]

Closed, as this PR (#13053) does show that component events are allowed to "fallthrough" (But seems like that PR doesn't directly fix this issue yet?)

[edison1105]

see #13382

[freshnewuniquename]

@edison1105 Thanks for linking the PR, I did see the PR that addresses the cannot redefine property: class issue. Added notes to post for clarification.

But FYI, my original question was for v-on modifiers not working on components. Example:

<!-- ❌ This doesn't work in Vapor Mode, left and right clicks will still trigger console.log() -->
<Foo @click.middle="console.log('Middle-clicked <Foo>')" />

<!-- ✅ This works as expected. Only middle click will trigger console.log() -->
<div @click.middle="console.log('Middle-clicked <div>')" />

Because the official documentation doesn't really state that component events will be handled implicitly (no explicit defineEmits), so I'm not sure if the first case should be supported. But since #13053 did confirm it (include modifiers when generating props?), so I closed this discussion as the first line should have been supported (feel free to correct me if that's not the case).

But yeah, I probably can open a new issue for the v-on modifiers on components?

[edison1105]

I will take a deep look

[edison1105]

Yes, <Foo @click.middle="console.log('Middle-clicked <Foo>')" /> needs to be supported. Vapor will align its behavior with vdom components. I don't think it's necessary to open a new issue, as we already know #13053 fixed it. It's also documented in the vapor roadmap: #13687.

[freshnewuniquename]

Alright, thanks a lot 🙏