Vue: Custom events: <child v-on:child-msg="handleIt"></child>

[gkiely]

Vue.js version

1.0.25

Reproduction Link

https://jsfiddle.net/oL5qyky9/

Steps to reproduce

Press the dispatch event button

What is Expected?

alert('handled it')

What is actually happening?

alert('handleIt did not run');

Once you change it from childMsg back to child-msg it behaves as expected.

[marceloadsj]

Removing the 'events obj' from parent did the trick:

https://jsfiddle.net/oL5qyky9/2/

I think that the events obj with 'child-msg' key was 'overwriting' the method bind in template.

[yyx990803]

Because you changed child-msg in the example to childMsg. Note when using v-on in the template, the event name will be turned into lowercase by the browser. This is part of the 1.x template parsing restrictions, so avoid using uppercase letters in event names in 1.x.

2.0 doesn't have this limitation.

[gkiely]

Ahh that makes sense. Thanks guys.