Browse Source

fix(could not set 0 as value of checkbox because it was falsy)

Ryan Chandler 4 năm trước cách đây
mục cha
commit
8996ec1076
5 tập tin đã thay đổi với 8 bổ sung4 xóa
  1. 1 1
      dist/alpine-ie11.js
  2. 1 1
      dist/alpine.js
  3. 2 0
      examples/index.html
  4. 1 1
      src/directives/bind.js
  5. 3 1
      test/bind.spec.js

+ 1 - 1
dist/alpine-ie11.js

@@ -6466,7 +6466,7 @@
         // 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 (value && typeof value !== 'boolean' && attrType === 'bind') {
+        if (typeof value !== 'boolean' && ![null, false, undefined].includes(value) && attrType === 'bind') {
           el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {

+ 1 - 1
dist/alpine.js

@@ -647,7 +647,7 @@
         // 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 (value && typeof value !== 'boolean' && attrType === 'bind') {
+        if (typeof value !== 'boolean' && ![null, false, undefined].includes(value) && attrType === 'bind') {
           el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {

+ 2 - 0
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:

+ 1 - 1
src/directives/bind.js

@@ -25,7 +25,7 @@ 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 (value && typeof value !== 'boolean' && attrType === 'bind') {
+            if (typeof value !== 'boolean' && ! [null, undefined].includes(value) && attrType === 'bind') {
                 el.value = String(value)
             } else if (attrType !== 'bind') {
                 if (Array.isArray(value)) {

+ 3 - 1
test/bind.spec.js

@@ -512,8 +512,9 @@ test('attribute binding names can contain numbers', async () => {
 
 test('non-string and non-boolean attributes are cast to string when bound to checkbox', () => {
     document.body.innerHTML = `
-        <div x-data="{ number: 100, bool: true, nullProp: null }">
+        <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>
@@ -522,6 +523,7 @@ test('non-string and non-boolean attributes are cast to string when bound to che
     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')
 })