theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(runtime-core): fix kebab-case props update

Browse Source 
fix #955
This commit is contained in:
Evan You 2020-04-13 12:37:31 -04:00
parent 27b5c71944
commit 7cbf684611
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/runtime-core/__tests__/componentProps.spec.ts
View File

@ -20,7 +20,7 @@ describe('component props', () => {
let proxy: any let proxy: any
const Comp = defineComponent({ const Comp = defineComponent({
props: ['foo'], props: ['fooBar'],
render() { render() {
props = this.$props props = this.$props
attrs = this.$attrs attrs = this.$attrs
@ -29,18 +29,25 @@ describe('component props', () => {
}) })
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
render(h(Comp, { foo: 1, bar: 2 }), root) render(h(Comp, { fooBar: 1, bar: 2 }), root)
expect(proxy.foo).toBe(1) expect(proxy.fooBar).toBe(1)
expect(props).toEqual({ foo: 1 }) expect(props).toEqual({ fooBar: 1 })
expect(attrs).toEqual({ bar: 2 }) expect(attrs).toEqual({ bar: 2 })
render(h(Comp, { foo: 2, bar: 3, baz: 4 }), root) // test passing kebab-case and resolving to camelCase
expect(proxy.foo).toBe(2) render(h(Comp, { 'foo-bar': 2, bar: 3, baz: 4 }), root)
expect(props).toEqual({ foo: 2 }) expect(proxy.fooBar).toBe(2)
expect(props).toEqual({ fooBar: 2 })
expect(attrs).toEqual({ bar: 3, baz: 4 })
// test updating kebab-case should not delete it (#955)
render(h(Comp, { 'foo-bar': 3, bar: 3, baz: 4 }), root)
expect(proxy.fooBar).toBe(3)
expect(props).toEqual({ fooBar: 3 })
expect(attrs).toEqual({ bar: 3, baz: 4 }) expect(attrs).toEqual({ bar: 3, baz: 4 })
render(h(Comp, { qux: 5 }), root) render(h(Comp, { qux: 5 }), root)
expect(proxy.foo).toBeUndefined() expect(proxy.fooBar).toBeUndefined()
expect(props).toEqual({}) expect(props).toEqual({})
expect(attrs).toEqual({ qux: 5 }) expect(attrs).toEqual({ qux: 5 })
}) })

9
packages/runtime-core/src/componentProps.ts
View File

@ -177,8 +177,15 @@ export function updateProps(
setFullProps(instance, rawProps, props, attrs) setFullProps(instance, rawProps, props, attrs)
// in case of dynamic props, check if we need to delete keys from // in case of dynamic props, check if we need to delete keys from
// the props object // the props object
let kebabKey: string
for (const key in rawCurrentProps) { for (const key in rawCurrentProps) {
if (!rawProps || !hasOwn(rawProps, key)) { if (
!rawProps ||
(!hasOwn(rawProps, key) &&
// it's possible the original props was passed in as kebab-case
// and converted to camelCase (#955)
((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))
) {
delete props[key] delete props[key]
} }
} }