Vue-next: #2278 causes kebab case listener not get triggered

[yaquawa]

Version

3.0.1

Reproduction link

https://codesandbox.io/s/dreamy-khayyam-m06w1?file=/src/App.vue

Steps to reproduce

<foo @my-event-name="callEvent" />

this.$emit('my-event-name') // `callEvent` not triggered

What is expected?

The doc recommends using kebab case for event names, but #2278 breaks this.

https://v3.vuejs.org/guide/component-custom-events.html#event-names

What is actually happening?

After https://github.com/vuejs/vue-next/pull/2278 got merged, my code shown above won't work.

(You might want to write some tests before merge. Thanks!)

[posva]

Your reproduction works...

[yaquawa]

@posva have you clicked the "Hello Vue 3 in CodeSandbox!" ? If it works, the alert should appears.

[LinusBorg]

@posva I don't get any alert from clicking on HelloWorld's body, can't say this works.

[posva]

Huh?

Edit: Forced updated the vue version and it doesn't work :+1:

[Wizard67]

I'm having the same problem.

[LinusBorg]

Since #2278 now all events are camelCased, we now have to camelCase events everywhere, mainly in two places:

1. when setting emitsOptions on the internal instanc
2. during the call of emit(), the first argument.

/cc @yyx990803 this is a pretty broad regression from 3.0.0 and might need a hotfix release.

[07akioni]

Docs may need an update too.

[LinusBorg]

If we make the changes i mentioned, docs could stay as they are. Pascal-Case recommended, but camel case works as well.

[yyx990803]

This works correctly in a reproduction using 3.0.1 global build (https://jsfiddle.net/yyx990803/3scy68d5/1/) and also works on a fresh vue-cli project using 3.0.1. There could be a compiler/runtime version mismatch in your project that doesn't properly camelize the event when emitting (make sure your @vue/compiler-sfc is also on 3.0.1).

Closing since it's not reproducible.

[yaquawa]

@LinusBorg @07akioni @posva can you guys confirm it's working on the iife version of vue >=3.0.1 ?

[posva]

yes, it's working

[LinusBorg]

https://jsfiddle.net/Linusborg/oqzhp2c7/1/

yep.

[ttntm]

This works correctly in a reproduction using 3.0.1 global build (https://jsfiddle.net/yyx990803/3scy68d5/1/) and also works on a fresh vue-cli project using 3.0.1. There could be a compiler/runtime version mismatch in your project that doesn't properly camelize the event when emitting (make sure your @vue/compiler-sfc is also on 3.0.1).

Closing since it's not reproducible.

Thanks, this was really helpful.

Just updated a project I'm working on to 3.0.2 and ended up here because of events not firing/not being caught - npm update @vue/compiler-sfc fixed that.

[yaquawa]

Thanks guys, I don't know why, but it works now automatically...

[lee-orr]

I'm still getting this issue w/ @vue/compiler-sfc 3.0.4 & vue 3.0.4. Was able to reproduce it in a JSFiddle that only relies on the unpkg dist for vue 3.0.4: https://jsfiddle.net/meo9Lfya/3/
You'll notice that the event works when clicking the "lowercase" button, but not the "kebab" button, but when using "addEventListener" on the element, both work.

[LinusBorg]

Please open a new issue. This will get drowned out.