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

Created on 18 Jun 2016  ·  3Comments  ·  Source: vuejs/vue

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.

Most helpful comment

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.

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.

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.

Ahh that makes sense. Thanks guys.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

robertleeplummerjr picture robertleeplummerjr  ·  3Comments

paulpflug picture paulpflug  ·  3Comments

paceband picture paceband  ·  3Comments

Jokcy picture Jokcy  ·  3Comments

franciscolourenco picture franciscolourenco  ·  3Comments