fix(v-model): respect checkbox true-value/false-value on initial render

fix #2694
vuejs · Dec 1, 2020 · 48f00c0 · 48f00c0
1 parent 085bbd5
commit 48f00c0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -99,8 +99,7 @@ export const vModelText: ModelDirective<
 }
 
 export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
-  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<HTMLInputElement> = {
       }
     })
   },
+  // 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)