Vue: Custom events: <child v-on:child-msg="handleIt"></child>
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.
gkiely
All 3 comments
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.
marceloadsj
on 18 Jun 2016
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.
yyx990803
on 18 Jun 2016
👍3
Ahh that makes sense. Thanks guys.
gkiely
on 19 Jun 2016
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
franciscolourenco
·
3Comments
fergaldoyle
·
3Comments
wufeng87
·
3Comments
paulpflug
·
3Comments
finico
·
3Comments
Most helpful comment
Because you changed
child-msgin the example tochildMsg. Note when usingv-onin 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.