Skip to content

Commit 9c5b445

Browse files
committed
fix(runtime-dom): fix v-model.number does not work for radio buttons
1 parent 14f6917 commit 9c5b445

File tree

2 files changed

+54
-2
lines changed

2 files changed

+54
-2
lines changed

packages/runtime-dom/__tests__/directives/vModel.spec.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1445,4 +1445,56 @@ describe('vModel', () => {
14451445

14461446
expect(inputNum1.value).toBe('1')
14471447
})
1448+
1449+
// #10886
1450+
it('v-model.number should work with radio buttons', async () => {
1451+
const component = defineComponent({
1452+
data() {
1453+
return { value: null }
1454+
},
1455+
render() {
1456+
return [
1457+
withVModel(
1458+
h('input', {
1459+
type: 'radio',
1460+
class: 'one',
1461+
value: '1',
1462+
'onUpdate:modelValue': setValue.bind(this),
1463+
}),
1464+
this.value,
1465+
{
1466+
number: true,
1467+
},
1468+
),
1469+
withVModel(
1470+
h('input', {
1471+
type: 'radio',
1472+
class: 'two',
1473+
value: '2.2',
1474+
'onUpdate:modelValue': setValue.bind(this),
1475+
}),
1476+
this.value,
1477+
{
1478+
number: true,
1479+
},
1480+
),
1481+
]
1482+
},
1483+
})
1484+
render(h(component), root)
1485+
1486+
const one = root.querySelector('.one')
1487+
const two = root.querySelector('.two')
1488+
const data = root._vnode.component.data
1489+
1490+
one.checked = true
1491+
triggerEvent('change', one)
1492+
await nextTick()
1493+
expect(data.value).toEqual(1)
1494+
1495+
two.checked = true
1496+
triggerEvent('change', two)
1497+
await nextTick()
1498+
expect(data.value).toEqual(2.2)
1499+
})
14481500
})

packages/runtime-dom/src/directives/vModel.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,11 @@ function setChecked(
184184
}
185185

186186
export const vModelRadio: ModelDirective<HTMLInputElement> = {
187-
created(el, { value }, vnode) {
187+
created(el, { value, modifiers: { number } }, vnode) {
188188
el.checked = looseEqual(value, vnode.props!.value)
189189
el[assignKey] = getModelAssigner(vnode)
190190
addEventListener(el, 'change', () => {
191-
el[assignKey](getValue(el))
191+
el[assignKey](number ? looseToNumber(getValue(el)) : getValue(el))
192192
})
193193
},
194194
beforeUpdate(el, { value, oldValue }, vnode) {

0 commit comments

Comments
 (0)