fix: The template does not define the corresponding attribute, and as…

…signs a number type directly through el, throw an wran of a string vuejs#5793
hcg1023 · Apr 24, 2022 · 434f0fa · 434f0fa
1 parent 28b3e1b
commit 434f0fa
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -231,6 +231,23 @@ describe('defineCustomElement', () => {
       el['max-age'] = 100
       expect(el.maxAge).toBe(100)
     })
+
+    test('set number value in dom property', () => {
+      const E = defineCustomElement({
+        props: {
+          maxAge: Number
+        },
+        render() {
+          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('emits', () => {

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
@@ -222,10 +222,12 @@ export class VueElement extends BaseClass {
       // cast Number-type props set before resolve
       let numberProps
       if (hasOptions) {
-        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])
+            if (key in this._props) {
+              this._props[key] = toNumber(this._props[key])
+            }
             ;(numberProps || (numberProps = Object.create(null)))[key] = true
           }
         }