Skip to content

Commit 83a79a8

Browse files
committed
Revert "fix(v-model): mutate original array for v-model multi checkbox (#2663)"
This reverts commit 87581cd. ref: #2700
1 parent 11a76eb commit 83a79a8

File tree

2 files changed

+5
-76
lines changed

2 files changed

+5
-76
lines changed

packages/runtime-dom/__tests__/directives/vModel.spec.ts

+1-74
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import {
66
vModelDynamic,
77
withDirectives,
88
VNode,
9-
ref,
10-
reactive
9+
ref
1110
} from '@vue/runtime-dom'
1211

1312
const triggerEvent = (type: string, el: Element) => {
@@ -434,78 +433,6 @@ describe('vModel', () => {
434433
expect(bar.checked).toEqual(false)
435434
})
436435

437-
it(`should support the reactive array in setup as a checkbox model`, async () => {
438-
const value = reactive<string[]>([])
439-
440-
const component = defineComponent({
441-
setup() {
442-
return () => {
443-
return [
444-
withVModel(
445-
h('input', {
446-
type: 'checkbox',
447-
class: 'foo',
448-
value: 'foo',
449-
'onUpdate:modelValue': setValue.bind(this)
450-
}),
451-
value
452-
),
453-
withVModel(
454-
h('input', {
455-
type: 'checkbox',
456-
class: 'bar',
457-
value: 'bar',
458-
'onUpdate:modelValue': setValue.bind(this)
459-
}),
460-
value
461-
)
462-
]
463-
}
464-
}
465-
})
466-
render(h(component), root)
467-
468-
const foo = root.querySelector('.foo')
469-
const bar = root.querySelector('.bar')
470-
471-
foo.checked = true
472-
triggerEvent('change', foo)
473-
await nextTick()
474-
expect(value).toMatchObject(['foo'])
475-
476-
bar.checked = true
477-
triggerEvent('change', bar)
478-
await nextTick()
479-
expect(value).toMatchObject(['foo', 'bar'])
480-
481-
bar.checked = false
482-
triggerEvent('change', bar)
483-
await nextTick()
484-
expect(value).toMatchObject(['foo'])
485-
486-
foo.checked = false
487-
triggerEvent('change', foo)
488-
await nextTick()
489-
expect(value).toMatchObject([])
490-
491-
value.length = 0
492-
value.push('foo')
493-
await nextTick()
494-
expect(bar.checked).toEqual(false)
495-
expect(foo.checked).toEqual(true)
496-
497-
value.length = 0
498-
value.push('bar')
499-
await nextTick()
500-
expect(foo.checked).toEqual(false)
501-
expect(bar.checked).toEqual(true)
502-
503-
value.length = 0
504-
await nextTick()
505-
expect(foo.checked).toEqual(false)
506-
expect(bar.checked).toEqual(false)
507-
})
508-
509436
it(`should support Set as a checkbox model`, async () => {
510437
const component = defineComponent({
511438
data() {

packages/runtime-dom/src/directives/vModel.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,11 @@ export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
111111
const index = looseIndexOf(modelValue, elementValue)
112112
const found = index !== -1
113113
if (checked && !found) {
114-
modelValue.push(elementValue)
114+
assign(modelValue.concat(elementValue))
115115
} else if (!checked && found) {
116-
modelValue.splice(index, 1)
116+
const filtered = [...modelValue]
117+
filtered.splice(index, 1)
118+
assign(filtered)
117119
}
118120
} else if (isSet(modelValue)) {
119121
if (checked) {

0 commit comments

Comments
 (0)