From c4736d47c4e3321a5fe3ec8b4d3666acf4f8fbb2 Mon Sep 17 00:00:00 2001
From: YiMo <1905672206@qq.com>
Date: Wed, 8 May 2024 11:26:37 +0800
Subject: [PATCH] fix(runtime-dom): fix v-model.number does not work for radio
 buttons

---
 .../__tests__/directives/vModel.spec.ts       | 52 +++++++++++++++++++
 packages/runtime-dom/src/directives/vModel.ts |  4 +-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 534e5dfe98e..889cc2a14a1 100644
--- 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
index 5057e16d472..bb782217ad5 100644
--- 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) {