Merge pull request #770 from ryangjchandler/fix/non-boolean-values-checkbox-bindinig

 fix(allow binding non string values to checkboxes)

dist/alpine-ie11.js

@@ -6450,8 +6450,8 @@
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean, leave it alone, it will be set to "on"
         // automatically.
-        if (typeof value === 'string' && attrType === 'bind') {
-          el.value = value;
+        if (typeof value !== 'boolean' && ![null, false, undefined].includes(value) && attrType === 'bind') {
+          el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {
             // I'm purposely not using Array.includes here because it's

dist/alpine.js

@@ -647,8 +647,8 @@
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean, leave it alone, it will be set to "on"
         // automatically.
-        if (typeof value === 'string' && attrType === 'bind') {
-          el.value = value;
+        if (typeof value !== 'boolean' && ![null, false, undefined].includes(value) && attrType === 'bind') {
+          el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {
             // I'm purposely not using Array.includes here because it's

examples/index.html

@@ -110,6 +110,8 @@
                             <span x-text="JSON.stringify(checkbox)"></span>
                             <input type="checkbox" x-model="checkbox"
                                 value="foo">
+                                <input type="checkbox" x-model="checkbox"
+                                :value="0">
                             <input type="checkbox" x-model="checkbox"
                                 value="bar">
                             Radio:

src/directives/bind.js

@@ -25,17 +25,17 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             // If we are explicitly binding a string to the :value, set the string,
             // If the value is a boolean, leave it alone, it will be set to "on"
             // automatically.
-            if (typeof value === 'string' && attrType === 'bind') {
-                el.value = value
+            if (typeof value !== 'boolean' && ! [null, undefined].includes(value) && attrType === 'bind') {
+                el.value = String(value)
             } else if (attrType !== 'bind') {
-               if (Array.isArray(value)) {
-                // I'm purposely not using Array.includes here because it's
-                // strict, and because of Numeric/String mis-casting, I
-                // want the "includes" to be "fuzzy".
-                el.checked = value.some(val => val == el.value)
-              } else {
-                el.checked = !! value
-              }
+                if (Array.isArray(value)) {
+                    // I'm purposely not using Array.includes here because it's
+                    // strict, and because of Numeric/String mis-casting, I
+                    // want the "includes" to be "fuzzy".
+                    el.checked = value.some(val => val == el.value)
+                } else {
+                    el.checked = !!value
+                }
             }
         } else if (el.tagName === 'SELECT') {
             updateSelect(el, value)
@@ -78,7 +78,7 @@ export function handleAttributeBindingDirective(component, el, attrName, express
 }
 
 function setIfChanged(el, attrName, value) {
-    if (el.getAttribute(attrName) != value){
+    if (el.getAttribute(attrName) != value) {
         el.setAttribute(attrName, value)
     }
 }

test/bind.spec.js

@@ -509,3 +509,21 @@ test('attribute binding names can contain numbers', async () => {
     expect(document.querySelector('line').getAttribute('x2')).toEqual('3');
     expect(document.querySelector('line').getAttribute('y2')).toEqual('4');
 })
+
+test('non-string and non-boolean attributes are cast to string when bound to checkbox', () => {
+    document.body.innerHTML = `
+        <div x-data="{ number: 100, zero: 0, bool: true, nullProp: null }">
+            <input type="checkbox" id="number" :value="number">
+            <input type="checkbox" id="zero" :value="zero">
+            <input type="checkbox" id="boolean" :value="bool">
+            <input type="checkbox" id="null" :value="nullProp">
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('#number').value).toEqual('100')
+    expect(document.querySelector('#zero').value).toEqual('0')
+    expect(document.querySelector('#boolean').value).toEqual('on')
+    expect(document.querySelector('#null').value).toEqual('on')
+})