diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 8bd4b5797..52b5e3013 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -280,7 +280,7 @@ describe('vModel', () => { it('should work with checkbox and true-value/false-value', async () => { const component = defineComponent({ data() { - return { value: null } + return { value: 'yes' } }, render() { return [ @@ -301,23 +301,26 @@ describe('vModel', () => { const input = root.querySelector('input') const data = root._vnode.component.data - input.checked = true - triggerEvent('change', input) - await nextTick() - expect(data.value).toEqual('yes') - - data.value = 'no' - await nextTick() - expect(input.checked).toEqual(false) - - data.value = 'yes' - await nextTick() + // DOM checked state should respect initial true-value/false-value expect(input.checked).toEqual(true) input.checked = false triggerEvent('change', input) await nextTick() expect(data.value).toEqual('no') + + data.value = 'yes' + await nextTick() + expect(input.checked).toEqual(true) + + data.value = 'no' + await nextTick() + expect(input.checked).toEqual(false) + + input.checked = true + triggerEvent('change', input) + await nextTick() + expect(data.value).toEqual('yes') }) it('should work with checkbox and true-value/false-value with object values', async () => { diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts index a157177f7..a90c4466a 100644 --- a/packages/runtime-dom/src/directives/vModel.ts +++ b/packages/runtime-dom/src/directives/vModel.ts @@ -99,8 +99,7 @@ export const vModelText: ModelDirective< } export const vModelCheckbox: ModelDirective = { - created(el, binding, vnode) { - setChecked(el, binding, vnode) + created(el, _, vnode) { el._assign = getModelAssigner(vnode) addEventListener(el, 'change', () => { const modelValue = (el as any)._modelValue @@ -130,6 +129,8 @@ export const vModelCheckbox: ModelDirective = { } }) }, + // set initial checked on mount to wait for true-value/false-value + mounted: setChecked, beforeUpdate(el, binding, vnode) { el._assign = getModelAssigner(vnode) setChecked(el, binding, vnode)