Skip to content

Commit a683e0f

Browse files
kazuponyyx990803
authored andcommitted
fix props validation fails (vuejs#3183) (vuejs#3193)
1 parent 547a64e commit a683e0f

File tree

2 files changed

+34
-0
lines changed

2 files changed

+34
-0
lines changed

src/compiler/compile-props.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const settablePathRE = /^[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*|\[[^\[\]]+\])*$/
3838

3939
export function compileProps (el, propOptions, vm) {
4040
var props = []
41+
var propsData = vm.$options.propsData
4142
var names = Object.keys(propOptions)
4243
var i = names.length
4344
var options, name, attr, value, path, parsed, prop
@@ -122,6 +123,9 @@ export function compileProps (el, propOptions, vm) {
122123
} else if ((value = getAttr(el, attr)) !== null) {
123124
// has literal binding!
124125
prop.raw = value
126+
} else if (propsData && ((value = propsData[name] || propsData[path]) !== null)) {
127+
// has propsData
128+
prop.raw = value
125129
} else if (process.env.NODE_ENV !== 'production') {
126130
// check possible camelCase prop usage
127131
var lowerCaseName = path.toLowerCase()

test/unit/specs/directives/internal/prop_spec.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -621,6 +621,36 @@ describe('prop', function () {
621621
expect(vm.a).toBe(123)
622622
})
623623

624+
// # GitHub issues #3183
625+
it('pass propsData to create component that props is defined', function () {
626+
var Comp = Vue.extend({
627+
template: '<div>{{propA.a}}:{{propB.b}}</div>',
628+
props: {
629+
propA: {
630+
type: Object,
631+
required: true
632+
},
633+
'prop-b': {
634+
type: Object,
635+
required: true
636+
}
637+
}
638+
})
639+
var vm = new Comp({
640+
el: el,
641+
propsData: {
642+
propA: { a: 123 },
643+
propB: { b: '456' }
644+
}
645+
})
646+
expect(vm.propA.a).toBe(123)
647+
expect(vm.propB.b).toBe('456')
648+
expect('Missing required prop: propA').not.toHaveBeenWarned()
649+
expect('Invalid prop: type check failed for prop "propA". Expected Object, got Undefined').not.toHaveBeenWarned()
650+
expect('Missing required prop: prop-b').not.toHaveBeenWarned()
651+
expect('Invalid prop: type check failed for prop "prop-b". Expected Object, got Undefined').not.toHaveBeenWarned()
652+
})
653+
624654
it('should warn using propsData during extension', function () {
625655
Vue.extend({
626656
propsData: {

0 commit comments

Comments
 (0)