Merge pull request #840 from ryangjchandler/fix/x-for-with-numeric-array

fix(x-for): issue with range iteration and numeric arrays

dist/alpine-ie11.js

@@ -6270,7 +6270,7 @@
     }.bind(this));
   }
   function isNumeric(subject) {
-    return !isNaN(subject);
+    return !Array.isArray(subject) && !isNaN(subject);
   } // Thanks @vuejs
   // https://github.com/vuejs/vue/blob/4de4649d9637262a9b007720b59f80ac72a5620c/src/shared/util.js
 

dist/alpine.js

@@ -491,7 +491,7 @@
     });
   }
   function isNumeric(subject) {
-    return !isNaN(subject);
+    return !Array.isArray(subject) && !isNaN(subject);
   } // Thanks @vuejs
   // https://github.com/vuejs/vue/blob/4de4649d9637262a9b007720b59f80ac72a5620c/src/shared/util.js
 

src/utils.js

@@ -486,7 +486,7 @@ export function transition(el, stages, type) {
 }
 
 export function isNumeric(subject){
-    return ! isNaN(subject)
+    return ! Array.isArray(subject) && ! isNaN(subject)
 }
 
 // Thanks @vuejs

test/for.spec.js

@@ -505,3 +505,30 @@ test('x-for over range using i in x syntax with data property', async () => {
 
     expect(document.querySelectorAll('span').length).toEqual(10)
 })
+
+test('x-for with an array of numbers', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ items: [] }">
+            <template x-for="i in items">
+                <span x-text="i"></span>
+            </template>
+            <button id="push-2" @click="items.push(2)"></button>
+            <button id="push-3" @click="items.push(3)"></button>
+        </div>
+    `
+
+    Alpine.start()
+
+    document.querySelector('#push-2').click()
+
+    await wait(() => {
+        expect(document.querySelector('span').textContent).toEqual('2')
+    })
+
+    document.querySelector('#push-3').click()
+
+    await wait(() => {
+        expect(document.querySelectorAll('span').length).toEqual(2)
+        expect(document.querySelectorAll('span')[1].textContent).toEqual('3')
+    })
+})