fix(runtime-dom): fix v-model.number does not work for radio buttons

vuejs · Nov 4, 2024 · c4736d4 · c4736d4
1 parent 7d0dc73
commit c4736d4
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 2 deletions.
diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -1445,4 +1445,56 @@ describe('vModel', () => {
 
     expect(inputNum1.value).toBe('1')
   })
+
+  // #10886
+  it('v-model.number should work with radio buttons', async () => {
+    const component = defineComponent({
+      data() {
+        return { value: null }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              type: 'radio',
+              class: 'one',
+              value: '1',
+              'onUpdate:modelValue': setValue.bind(this),
+            }),
+            this.value,
+            {
+              number: true,
+            },
+          ),
+          withVModel(
+            h('input', {
+              type: 'radio',
+              class: 'two',
+              value: '2.2',
+              'onUpdate:modelValue': setValue.bind(this),
+            }),
+            this.value,
+            {
+              number: true,
+            },
+          ),
+        ]
+      },
+    })
+    render(h(component), root)
+
+    const one = root.querySelector('.one')
+    const two = root.querySelector('.two')
+    const data = root._vnode.component.data
+
+    one.checked = true
+    triggerEvent('change', one)
+    await nextTick()
+    expect(data.value).toEqual(1)
+
+    two.checked = true
+    triggerEvent('change', two)
+    await nextTick()
+    expect(data.value).toEqual(2.2)
+  })
 })
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
@@ -184,11 +184,11 @@ function setChecked(
 }
 
 export const vModelRadio: ModelDirective<HTMLInputElement> = {
-  created(el, { value }, vnode) {
+  created(el, { value, modifiers: { number } }, vnode) {
     el.checked = looseEqual(value, vnode.props!.value)
     el[assignKey] = getModelAssigner(vnode)
     addEventListener(el, 'change', () => {
-      el[assignKey](getValue(el))
+      el[assignKey](number ? looseToNumber(getValue(el)) : getValue(el))
     })
   },
   beforeUpdate(el, { value, oldValue }, vnode) {