Issue when listening to camel case named events in dom templates

[miljan-aleksic]

Hi, I have a component triggering a clickOut event, while this works fine using string templates it fails using dom templates. Eg. <my-comp @click-out... in dom would be ignored while <my-comp @clickOut... in string works just fine. Same happens with TitleCase events.

I understand that Vue converts this cases in the background, reason why I rise this issue. But if I'm wrong and there is something wrong in my approach, please excuse my ignorance.

Fiddle is avaialble.

I would expect that no matter the case applied to the event name, it would work listening to any of it variations or at the very least the kebab-case when using dom templates.

Thank you very much and let me know if you need any additional information.

[yyx990803]

This is due to the exact same reason why props need to be kebab case in in-dom templates: they are converted to all lowercase by the browser before Vue can even parse it. There's literally nothing Vue can do about this - the only workaround is don't use camelCase event names if you use in-dom templates.

[miljan-aleksic]

Hi @yyx990803. Yes, I understand the reasons, but why Vue can't do anything about? I could think of establishing an internal case standard and convert all $emits and @listeners to a standard case before saving or triggering the event. What I am missing?

[yyx990803]

Implicit case casting can cause subtle bugs if users emit events with different casing but normalizes to the same string. The simple rule of "never use camelCase" is much more straightforward than any magic casting rules.

[miljan-aleksic]

Yes... then the recommended action to support both dom and string templates would be to adapt the events and props names to kebab-case.

Thanks for the clarification.