Skip to content

Commit

Permalink
fix(custom-elements): fix number type props casting check
Browse files Browse the repository at this point in the history
fix #5793
adapted from #5794
  • Loading branch information
yyx990803 committed Nov 11, 2022
1 parent afe8899 commit 89f37ce
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 3 deletions.
19 changes: 19 additions & 0 deletions packages/runtime-dom/__tests__/customElement.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,25 @@ describe('defineCustomElement', () => {
await nextTick()
expect(el.shadowRoot!.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
})

// # 5793
test('set number value in dom property', () => {
const E = defineCustomElement({
props: {
'max-age': Number
},
render() {
// @ts-ignore
return `max age: ${this.maxAge}/type: ${typeof this.maxAge}`
}
})
customElements.define('my-element-number-property', E)
const el = document.createElement('my-element-number-property') as any
container.appendChild(el)
el.maxAge = 50
expect(el.maxAge).toBe(50)
expect(el.shadowRoot.innerHTML).toBe('max age: 50/type: number')
})
})

describe('attrs', () => {
Expand Down
10 changes: 7 additions & 3 deletions packages/runtime-dom/src/apiCustomElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -234,11 +234,15 @@ export class VueElement extends BaseClass {
// cast Number-type props set before resolve
let numberProps
if (props && !isArray(props)) {
for (const key in this._props) {
for (const key in props) {
const opt = props[key]
if (opt === Number || (opt && opt.type === Number)) {
this._props[key] = toNumber(this._props[key])
;(numberProps || (numberProps = Object.create(null)))[key] = true
if (key in this._props) {
this._props[key] = toNumber(this._props[key])
}
;(numberProps || (numberProps = Object.create(null)))[
camelize(key)
] = true
}
}
}
Expand Down

0 comments on commit 89f37ce

Please sign in to comment.