Skip to content

Commit b87e51c

Browse files
committed
fix(runtime-dom): fix v-model.number does not work for radio buttons
1 parent 4619461 commit b87e51c

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
@@ -1306,4 +1306,56 @@ describe('vModel', () => {
13061306

13071307
expect(inputNum1.value).toBe('1')
13081308
})
1309+
1310+
// #10886
1311+
it('v-model.number should work with radio buttons', async () => {
1312+
const component = defineComponent({
1313+
data() {
1314+
return { value: null }
1315+
},
1316+
render() {
1317+
return [
1318+
withVModel(
1319+
h('input', {
1320+
type: 'radio',
1321+
class: 'one',
1322+
value: '1',
1323+
'onUpdate:modelValue': setValue.bind(this),
1324+
}),
1325+
this.value,
1326+
{
1327+
number: true,
1328+
},
1329+
),
1330+
withVModel(
1331+
h('input', {
1332+
type: 'radio',
1333+
class: 'two',
1334+
value: '2.2',
1335+
'onUpdate:modelValue': setValue.bind(this),
1336+
}),
1337+
this.value,
1338+
{
1339+
number: true,
1340+
},
1341+
),
1342+
]
1343+
},
1344+
})
1345+
render(h(component), root)
1346+
1347+
const one = root.querySelector('.one')
1348+
const two = root.querySelector('.two')
1349+
const data = root._vnode.component.data
1350+
1351+
one.checked = true
1352+
triggerEvent('change', one)
1353+
await nextTick()
1354+
expect(data.value).toEqual(1)
1355+
1356+
two.checked = true
1357+
triggerEvent('change', two)
1358+
await nextTick()
1359+
expect(data.value).toEqual(2.2)
1360+
})
13091361
})

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,11 @@ function setChecked(
168168
}
169169

170170
export const vModelRadio: ModelDirective<HTMLInputElement> = {
171-
created(el, { value }, vnode) {
171+
created(el, { value, modifiers: { number } }, vnode) {
172172
el.checked = looseEqual(value, vnode.props!.value)
173173
el[assignKey] = getModelAssigner(vnode)
174174
addEventListener(el, 'change', () => {
175-
el[assignKey](getValue(el))
175+
el[assignKey](number ? looseToNumber(getValue(el)) : getValue(el))
176176
})
177177
},
178178
beforeUpdate(el, { value, oldValue }, vnode) {

0 commit comments

Comments
 (0)