diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 255f49c8e..a1d729be4 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -6,8 +6,7 @@ import { vModelDynamic, withDirectives, VNode, - ref, - reactive + ref } from '@vue/runtime-dom' const triggerEvent = (type: string, el: Element) => { @@ -434,78 +433,6 @@ describe('vModel', () => { expect(bar.checked).toEqual(false) }) - it(`should support the reactive array in setup as a checkbox model`, async () => { - const value = reactive([]) - - const component = defineComponent({ - setup() { - return () => { - return [ - withVModel( - h('input', { - type: 'checkbox', - class: 'foo', - value: 'foo', - 'onUpdate:modelValue': setValue.bind(this) - }), - value - ), - withVModel( - h('input', { - type: 'checkbox', - class: 'bar', - value: 'bar', - 'onUpdate:modelValue': setValue.bind(this) - }), - value - ) - ] - } - } - }) - render(h(component), root) - - const foo = root.querySelector('.foo') - const bar = root.querySelector('.bar') - - foo.checked = true - triggerEvent('change', foo) - await nextTick() - expect(value).toMatchObject(['foo']) - - bar.checked = true - triggerEvent('change', bar) - await nextTick() - expect(value).toMatchObject(['foo', 'bar']) - - bar.checked = false - triggerEvent('change', bar) - await nextTick() - expect(value).toMatchObject(['foo']) - - foo.checked = false - triggerEvent('change', foo) - await nextTick() - expect(value).toMatchObject([]) - - value.length = 0 - value.push('foo') - await nextTick() - expect(bar.checked).toEqual(false) - expect(foo.checked).toEqual(true) - - value.length = 0 - value.push('bar') - await nextTick() - expect(foo.checked).toEqual(false) - expect(bar.checked).toEqual(true) - - value.length = 0 - await nextTick() - expect(foo.checked).toEqual(false) - expect(bar.checked).toEqual(false) - }) - it(`should support Set as a checkbox model`, async () => { const component = defineComponent({ data() { diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts index ed5252039..78a5b130f 100644 --- a/packages/runtime-dom/src/directives/vModel.ts +++ b/packages/runtime-dom/src/directives/vModel.ts @@ -111,9 +111,11 @@ export const vModelCheckbox: ModelDirective = { const index = looseIndexOf(modelValue, elementValue) const found = index !== -1 if (checked && !found) { - modelValue.push(elementValue) + assign(modelValue.concat(elementValue)) } else if (!checked && found) { - modelValue.splice(index, 1) + const filtered = [...modelValue] + filtered.splice(index, 1) + assign(filtered) } } else if (isSet(modelValue)) { if (checked) {