New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

camelCased custom event name is not working #4044

Closed
davepoon opened this Issue Oct 27, 2016 · 5 comments

Comments

Projects
None yet
4 participants
@davepoon
Copy link

davepoon commented Oct 27, 2016

Vue.js version

2.0.3

Reproduction Link

I modified the custom event example from the documentation as an example (http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events),

https://jsfiddle.net/davepoon128/w6z1kdj9/2/

Steps to reproduce

  1. Create a custom event
  2. Name the custom event using camelCase
  3. Call the custom event (i.e. using $emit or $on from a child component)
  4. The custom event won't be listened, just nothing happened.

In the jsfiddle example, incrementOne is the custom event name for the button-counter component, but it won't work if clicking the button.
If I change the incrementOne custom event name to increment,
which will be back normal, everything will work properly.

What is Expected?

camelCased custom event name should be called in the parent component if a child component is calling it using $emit.

What is actually happening?

If you use camelCased name for a custom event, it will not respond to any call. You have to change it to lowercased event name in order to respond to any call.

@LinusBorg

This comment has been minimized.

Copy link
Member

LinusBorg commented Oct 27, 2016

HTML attributes are csse-insensitive, so if anything, you should use kebap-case in the template.

However, that does not work either. Will discuss weithet we want to change this to convert between kebap-case and camelCase like we do with props

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Nov 1, 2016

This is a limitation when using in-dom template. String templates are not subject to this: https://jsfiddle.net/w6z1kdj9/3/

@geoidesic

This comment has been minimized.

Copy link

geoidesic commented Feb 28, 2017

So is this not going to be fixed? Seems like this breaks a lot of people's projects and I'm also pretty sure one can do this in Angular.

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Feb 28, 2017

@geoidesic if it never worked in the first place how could it be breaking people's projects?

As explained, this only applies to in-dom templates, and no, it won't work in Angular either if you use in-dom templates. This cannot be fixed so there nothing to fix. It does work if you use string templates.

@geoidesic

This comment has been minimized.

Copy link

geoidesic commented Mar 1, 2017

Ok apologies if that was a waste of your time – I was picking up from what people were saying on Gitter, some were saying they were concerned about it. I'm still a n00b to Vue and I'll take your word for it. Great framework – I'm loving it so far!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment