diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 534e5dfe98e..d9a7790e0f6 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -5,6 +5,7 @@ import { nextTick, ref, render, + vModelCheckbox, vModelDynamic, withDirectives, } from '@vue/runtime-dom' @@ -1445,4 +1446,51 @@ describe('vModel', () => { expect(inputNum1.value).toBe('1') }) + + it(`should support mutating an array or set value for a checkbox`, async () => { + const component = defineComponent({ + data() { + return { value: [] } + }, + render() { + return [ + withDirectives( + h('input', { + type: 'checkbox', + class: 'foo', + value: 'foo', + 'onUpdate:modelValue': setValue.bind(this), + }), + [[vModelCheckbox, this.value]], + ), + ] + }, + }) + render(h(component), root) + + const foo = root.querySelector('.foo') + const data = root._vnode.component.data + + expect(foo.checked).toEqual(false) + + data.value.push('foo') + await nextTick() + expect(foo.checked).toEqual(true) + + data.value[0] = 'bar' + await nextTick() + expect(foo.checked).toEqual(false) + + data.value = new Set() + await nextTick() + expect(foo.checked).toEqual(false) + + data.value.add('foo') + await nextTick() + expect(foo.checked).toEqual(true) + + data.value.delete('foo') + await nextTick() + expect(foo.checked).toEqual(false) + }) })