Fix x-if inside x-for

onimy-apps · Apr 2, 2020 · b16a514 · b16a514
1 parent d5831bc
commit b16a514
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/dist/alpine-ie11.js b/dist/alpine-ie11.js
@@ -5708,7 +5708,7 @@
     component.showDirectiveLastElement = el;
   }
 
-  function handleIfDirective(component, el, expressionResult, initialUpdate) {
+  function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {
     var _this = this;
 
     if (el.nodeName.toLowerCase() !== 'template') console.warn("Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if");
@@ -5721,7 +5721,7 @@
       transitionIn(el.nextElementSibling, function () {
         _newArrowCheck(this, _this);
       }.bind(this), initialUpdate);
-      component.initializeElements(el.nextElementSibling);
+      component.initializeElements(el.nextElementSibling, extraVars);
     } else if (!expressionResult && elementHasAlreadyBeenAdded) {
       transitionOut(el.nextElementSibling, function () {
         _newArrowCheck(this, _this);
@@ -6407,7 +6407,7 @@
                 return i.type === 'for';
               }.bind(this)).length > 0) return;
               var output = this.evaluateReturnExpression(el, expression, extraVars);
-              handleIfDirective(this, el, output, initialUpdate);
+              handleIfDirective(this, el, output, initialUpdate, extraVars);
               break;
 
             case 'for':

diff --git a/dist/alpine.js b/dist/alpine.js
@@ -672,7 +672,7 @@
     component.showDirectiveLastElement = el;
   }
 
-  function handleIfDirective(component, el, expressionResult, initialUpdate) {
+  function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {
     if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if`);
     const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true;
 
@@ -681,7 +681,7 @@
       el.parentElement.insertBefore(clone, el.nextElementSibling);
       el.nextElementSibling.__x_inserted_me = true;
       transitionIn(el.nextElementSibling, () => {}, initialUpdate);
-      component.initializeElements(el.nextElementSibling);
+      component.initializeElements(el.nextElementSibling, extraVars);
     } else if (!expressionResult && elementHasAlreadyBeenAdded) {
       transitionOut(el.nextElementSibling, () => {
         el.nextElementSibling.remove();
@@ -1498,7 +1498,7 @@
             // We will let the "x-for" directive handle the "if"ing.
             if (attrs.filter(i => i.type === 'for').length > 0) return;
             var output = this.evaluateReturnExpression(el, expression, extraVars);
-            handleIfDirective(this, el, output, initialUpdate);
+            handleIfDirective(this, el, output, initialUpdate, extraVars);
             break;
 
           case 'for':

diff --git a/src/component.js b/src/component.js
@@ -271,7 +271,7 @@ export default class Component {
 
                     var output = this.evaluateReturnExpression(el, expression, extraVars)
 
-                    handleIfDirective(this, el, output, initialUpdate)
+                    handleIfDirective(this, el, output, initialUpdate, extraVars)
                     break;
 
                 case 'for':

diff --git a/src/directives/if.js b/src/directives/if.js
@@ -1,6 +1,6 @@
 import { transitionIn, transitionOut } from '../utils'
 
-export function handleIfDirective(component, el, expressionResult, initialUpdate) {
+export function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {
     if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if`)
 
     const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true
@@ -14,7 +14,7 @@ export function handleIfDirective(component, el, expressionResult, initialUpdate
 
         transitionIn(el.nextElementSibling, () => {}, initialUpdate)
 
-        component.initializeElements(el.nextElementSibling)
+        component.initializeElements(el.nextElementSibling, extraVars)
     } else if (! expressionResult && elementHasAlreadyBeenAdded) {
         transitionOut(el.nextElementSibling, () => {
             el.nextElementSibling.remove()

diff --git a/test/if.spec.js b/test/if.spec.js
@@ -55,3 +55,24 @@ test('elements inside x-if are still reactive', async () => {
         expect(document.querySelector('span').innerText).toEqual('baz')
     })
 })
+
+test('x-if works inside a loop', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foos: [{bar: 'baz'}, {bar: 'bop'}]}">
+            <template x-for="foo in foos">
+                <div>
+                    <template x-if="foo.bar === 'baz'">
+                        <div>
+                            <span x-text="foo.bar"></span>
+                        </div>
+                    </template>
+                </div>
+            </template>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelectorAll('span').length).toEqual(1)
+    expect(document.querySelector('span').innerText).toEqual('baz')
+})