mirrors
/
vue3-core
mirror of https://mirror.osredm.com/root/vue3-core.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(runtime-core): custom-element: ensure number casting of camelCase props. (fix: #5374) (#5377)

This commit is contained in:
Thorsten Lünborg 2022-10-22 11:20:46 +02:00 committed by GitHub
parent 54b6ba32ca
commit b0b74a160c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/runtime-dom/__tests__/customElement.spec.ts
View File

@ -135,14 +135,14 @@ describe('defineCustomElement', () => {
test('attribute -> prop type casting', async () => { test('attribute -> prop type casting', async () => {
const E = defineCustomElement({ const E = defineCustomElement({
props: { props: {
foo: Number, fooBar: Number, // test casting of camelCase prop names
bar: Boolean, bar: Boolean,
baz: String baz: String
}, },
render() { render() {
return [ return [
this.foo, this.fooBar,
typeof this.foo, typeof this.fooBar,
this.bar, this.bar,
typeof this.bar, typeof this.bar,
this.baz, this.baz,
@ -151,7 +151,7 @@ describe('defineCustomElement', () => {
} }
}) })
customElements.define('my-el-props-cast', E) customElements.define('my-el-props-cast', E)
container.innerHTML = `<my-el-props-cast foo="1" baz="12345"></my-el-props-cast>` container.innerHTML = `<my-el-props-cast foo-bar="1" baz="12345"></my-el-props-cast>`
const e = container.childNodes[0] as VueElement const e = container.childNodes[0] as VueElement
expect(e.shadowRoot!.innerHTML).toBe( expect(e.shadowRoot!.innerHTML).toBe(
`1 number false boolean 12345 string` `1 number false boolean 12345 string`
@ -161,7 +161,7 @@ describe('defineCustomElement', () => {
await nextTick() await nextTick()
expect(e.shadowRoot!.innerHTML).toBe(`1 number true boolean 12345 string`) expect(e.shadowRoot!.innerHTML).toBe(`1 number true boolean 12345 string`)
e.setAttribute('foo', '2e1') e.setAttribute('foo-bar', '2e1')
await nextTick() await nextTick()
expect(e.shadowRoot!.innerHTML).toBe( expect(e.shadowRoot!.innerHTML).toBe(
`20 number true boolean 12345 string` `20 number true boolean 12345 string`

5
packages/runtime-dom/src/apiCustomElement.ts
View File

@ -268,10 +268,11 @@ export class VueElement extends BaseClass {
protected _setAttr(key: string) { protected _setAttr(key: string) {
let value = this.getAttribute(key) let value = this.getAttribute(key)
if (this._numberProps && this._numberProps[key]) { const camelKey = camelize(key)
if (this._numberProps && this._numberProps[camelKey]) {
value = toNumber(value) value = toNumber(value)
} }
this._setProp(camelize(key), value, false) this._setProp(camelKey, value, false)
} }
/** /**