Allow undefined inside x-for (#1903)

alpinejs · Aug 3, 2021 · c70e9a8 · c70e9a8
1 parent 3fe129f
commit c70e9a8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/alpinejs/src/directives/x-for.js b/packages/alpinejs/src/directives/x-for.js
@@ -45,6 +45,8 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
             items = Array.from(Array(items).keys(), i => i + 1)
         }
 
+        if (items === undefined) items = []
+
         let lookup = el._x_lookup
         let prevKeys = el._x_prevKeys
         let scopes = []

diff --git a/tests/cypress/integration/directives/x-for.spec.js b/tests/cypress/integration/directives/x-for.spec.js
@@ -393,7 +393,6 @@ test('x-for over range using i in property syntax',
     ({ get }) => get('span').should(haveLength('10'))
 )
 
-// @flaky
 test.retry(2)('x-for with an array of numbers',
     `
         <div x-data="{ items: [] }">
@@ -412,3 +411,19 @@ test.retry(2)('x-for with an array of numbers',
         get('span').should(haveLength('2'))
     }
 )
+
+test('x-for works with undefined',
+    `
+        <div x-data="{ items: undefined }">
+            <template x-for="i in items">
+                <span x-text="i"></span>
+            </template>
+            <button @click="items.push(2)" id="first">click me</button>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveLength('0'))
+        get('#first').click()
+        get('span').should(haveLength('1'))
+    }
+)