Skip to content

Commit

Permalink
fix(runtime-core): custom-element: ensure number casting of camelCase…
Browse files Browse the repository at this point in the history
… props. (fix: vuejs#5374) (vuejs#5377)
  • Loading branch information
LinusBorg authored and chrislone committed Feb 4, 2023
1 parent 3514052 commit feb1871
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 7 deletions.
10 changes: 5 additions & 5 deletions packages/runtime-dom/__tests__/customElement.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,14 @@ describe('defineCustomElement', () => {
test('attribute -> prop type casting', async () => {
const E = defineCustomElement({
props: {
foo: Number,
fooBar: Number, // test casting of camelCase prop names
bar: Boolean,
baz: String
},
render() {
return [
this.foo,
typeof this.foo,
this.fooBar,
typeof this.fooBar,
this.bar,
typeof this.bar,
this.baz,
Expand All @@ -151,7 +151,7 @@ describe('defineCustomElement', () => {
}
})
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
expect(e.shadowRoot!.innerHTML).toBe(
`1 number false boolean 12345 string`
Expand All @@ -161,7 +161,7 @@ describe('defineCustomElement', () => {
await nextTick()
expect(e.shadowRoot!.innerHTML).toBe(`1 number true boolean 12345 string`)

e.setAttribute('foo', '2e1')
e.setAttribute('foo-bar', '2e1')
await nextTick()
expect(e.shadowRoot!.innerHTML).toBe(
`20 number true boolean 12345 string`
Expand Down
5 changes: 3 additions & 2 deletions packages/runtime-dom/src/apiCustomElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -268,10 +268,11 @@ export class VueElement extends BaseClass {

protected _setAttr(key: string) {
let value = this.getAttribute(key)
if (this._numberProps && this._numberProps[key]) {
const camelKey = camelize(key)
if (this._numberProps && this._numberProps[camelKey]) {
value = toNumber(value)
}
this._setProp(camelize(key), value, false)
this._setProp(camelKey, value, false)
}

/**
Expand Down

0 comments on commit feb1871

Please sign in to comment.