Revert "fix(v-model): mutate original array for v-model multi checkbox (#2663)"

This reverts commit 87581cd2662d6db21b35db7a0b5df2090c8a7fe2.

ref: #2700

diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 255f49c8ed48263ae72fccf4fd92f28e6827e323..a1d729be48c11705fbcf30a574378c95a3013444 100644 (file)
--- 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<string[]>([])
-
-    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 ed5252039d114648854fc901a7c1a3e022577c1d..78a5b130f93063ae535b8b28578d1d5953dc4427 100644 (file)
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -111,9 +111,11 @@ export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
         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) {