improve camelCase prop warning message

This commit is contained in:
Evan You 2017-03-13 15:54:36 +08:00
parent c6ab2e06d4
commit 041683953a
3 changed files with 13 additions and 8 deletions

View File

@ -32,9 +32,11 @@ if (process.env.NODE_ENV !== 'production') {
if (vm.$root === vm) {
return '<Root>'
}
let name = vm._isVue
? vm.$options.name || vm.$options._componentTag
: vm.name
let name = typeof vm === 'function' && vm.options
? vm.options.name
: vm._isVue
? vm.$options.name || vm.$options._componentTag
: vm.name
const file = vm._isVue && vm.$options.__file
if (!name && file) {

View File

@ -10,7 +10,8 @@ import {
isObject,
hasOwn,
hyphenate,
validateProp
validateProp,
formatComponentName
} from '../util/index'
import {
@ -293,8 +294,11 @@ function extractProps (data: VNodeData, Ctor: Class<Component>): ?Object {
attrs && attrs.hasOwnProperty(keyInLowerCase)
) {
warn(
`HTML attributes are case-insensitive. camelCased prop names need ` +
`to use their kebab-case equivalents. ${key} should be ${altKey}.`
`Prop "${keyInLowerCase}" is not declared in component ` +
`${formatComponentName(Ctor)}. Note that HTML attributes are ` +
`case-insensitive and camelCased props need to use their kebab-case ` +
`equivalents when using in-DOM templates. You should probably use ` +
`"${altKey}" instead of "${key}".`
)
}
}

View File

@ -272,8 +272,7 @@ describe('Component', () => {
}
}).$mount()
expect(
'HTML attributes are case-insensitive. camelCased prop names need ' +
'to use their kebab-case equivalents. someCollection should be some-collection.'
'You should probably use "some-collection" instead of "someCollection".'
).toHaveBeenWarned()
})