feat(vModel): handle true-value and false-value for checkbox (#449)

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

@@ -101,7 +101,7 @@ export const vModelCheckbox: ObjectDirective<HTMLInputElement> = {
           assign(filtered)
         }
       } else {
-        assign(checked)
+        assign(getCheckboxValue(el, checked))
       }
     })
   },
@@ -119,7 +119,7 @@ function setChecked(
   if (isArray(value)) {
     el.checked = looseIndexOf(value, vnode.props!.value) > -1
   } else if (value !== oldValue) {
-    el.checked = !!value
+    el.checked = looseEqual(value, getCheckboxValue(el, true))
   }
 }
 
@@ -228,6 +228,15 @@ function getValue(el: HTMLOptionElement | HTMLInputElement) {
   return '_value' in el ? (el as any)._value : el.value
 }
 
+// retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
+function getCheckboxValue(
+  el: HTMLInputElement & { _trueValue?: any; _falseValue?: any },
+  checked: boolean
+) {
+  const key = checked ? '_trueValue' : '_falseValue'
+  return key in el ? el[key] : checked
+}
+
 export const vModelDynamic: ObjectDirective<
   HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
 > = {

packages/runtime-dom/src/patchProp.ts

@@ -5,9 +5,9 @@ import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
 import { isOn } from '@vue/shared'
 import {
-  VNode,
   ComponentInternalInstance,
-  SuspenseBoundary
+  SuspenseBoundary,
+  VNode
 } from '@vue/runtime-core'
 
 export function patchProp(
@@ -53,6 +53,15 @@ export function patchProp(
           unmountChildren
         )
       } else {
+        // special case for <input v-model type="checkbox"> with
+        // :true-value & :false-value
+        // store value as dom properties since non-string values will be
+        // stringified.
+        if (key === 'true-value') {
+          ;(el as any)._trueValue = nextValue
+        } else if (key === 'false-value') {
+          ;(el as any)._falseValue = nextValue
+        }
         patchAttr(el, key, nextValue)
       }
       break