diff --git a/src/core/instance/events.js b/src/core/instance/events.js index 4d5bb552850..3b4be64a0e7 100644 --- a/src/core/instance/events.js +++ b/src/core/instance/events.js @@ -121,8 +121,9 @@ export function eventsMixin (Vue: Class) { const lowerCaseEvent = event.toLowerCase() if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { tip( - `Event "${lowerCaseEvent}" is emitted in component ` + - `${formatComponentName(vm)} but the handler is registered for "${event}". ` + + `Event "${event}" is emitted in component ` + + `${formatComponentName(vm)} but the handler is registered for ` + + `"${lowerCaseEvent}". ` + `Note that HTML attributes are case-insensitive and you cannot use ` + `v-on to listen to camelCase events when using in-DOM templates. ` + `You should probably use "${hyphenate(event)}" instead of "${event}".` diff --git a/test/unit/features/component/component.spec.js b/test/unit/features/component/component.spec.js index 697a9dddbe7..23eb5e805a3 100644 --- a/test/unit/features/component/component.spec.js +++ b/test/unit/features/component/component.spec.js @@ -289,6 +289,8 @@ describe('Component', () => { } } }).$mount() + expect('"somecollection" is passed').toHaveBeenTipped() + expect('declared prop name is "someCollection"').toHaveBeenTipped() expect( 'You should probably use "some-collection" instead of "someCollection".' ).toHaveBeenTipped() @@ -306,6 +308,8 @@ describe('Component', () => { } } }).$mount() + expect('"fooBar" is emitted').toHaveBeenTipped() + expect('handler is registered for "foobar"').toHaveBeenTipped() expect( 'You should probably use "foo-bar" instead of "fooBar".' ).toHaveBeenTipped()