From: Evan You <yyx990803@gmail.com>
Date: Tue, 1 Dec 2020 17:02:37 +0000 (-0500)
Subject: fix(v-model): respect checkbox true-value/false-value on initial render
X-Git-Tag: v3.0.4~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=48f00c0f1b574a235be40c560d2cf373be97615e;p=thirdparty%2Fvuejs%2Fcore.git

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

fix #2694
---

diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 8bd4b57978..52b5e3013a 100644
--- 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
index a157177f73..a90c4466a1 100644
--- 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)