Caleb Porzio 2 years ago
parent
commit
61f64595fa
2 changed files with 31 additions and 1 deletions
  1. 29 0
      index.html
  2. 2 1
      packages/alpinejs/src/alpine.js

+ 29 - 0
index.html

@@ -10,6 +10,35 @@
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
 
+    <div x-data="{
+        my_array: [{x:'x'},{x:'y'}],
+        click() {
+            this.my_array = [{x:'a'},{x:'b'}];
+        }
+    }">
+
+        <!-- Loop with plain div -->
+        <template x-for="item in my_array">
+            <div x-text="item.x"></div>
+        </template>
+
+        <!-- Loop with div nested inside component -->
+        <template x-for="item in my_array">
+            <div x-data="some_component" >
+                <div x-text="item.x"></div>
+            </div>
+        </template>
+
+        <button @click="click">Click me</button>
+
+    </div>
+        <script>
+            document.addEventListener('alpine:init', () => {
+                Alpine.data('some_component', () => ({}));
+            });
+
+        </script>
+
 
 
 

+ 2 - 1
packages/alpinejs/src/alpine.js

@@ -1,7 +1,7 @@
 import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } from './reactivity'
 import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'
 import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
-import { mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
+import { onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
 import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
 import { transition } from './directives/x-transition'
@@ -32,6 +32,7 @@ let Alpine = {
     startObservingMutations,
     stopObservingMutations,
     setReactivityEngine,
+    onAttributeRemoved,
     closestDataStack,
     skipDuringClone,
     onlyDuringClone,