diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 8bd4b57978c..52b5e3013a5 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') + // DOM checked state should respect initial true-value/false-value + expect(input.checked).toEqual(true) - data.value = 'no' + input.checked = false + triggerEvent('change', input) await nextTick() - expect(input.checked).toEqual(false) + expect(data.value).toEqual('no') data.value = 'yes' await nextTick() expect(input.checked).toEqual(true) - input.checked = false + data.value = 'no' + await nextTick() + expect(input.checked).toEqual(false) + + input.checked = true triggerEvent('change', input) await nextTick() - expect(data.value).toEqual('no') + 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 a157177f73c..a90c4466a17 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)