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

This commit is contained in:
伊墨 2024-05-08 11:26:37 +08:00
parent fdbd026583
commit 8c6398bc46
2 changed files with 54 additions and 2 deletions

View File

@ -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)
})
})

View File

@ -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) {