From e6187f42ff6a7cbe71aa872db7a8c18f39e5f4bc Mon Sep 17 00:00:00 2001
From: Berend Klein Haneveld <berendkleinhaneveld@gmail.com>
Date: Tue, 25 Nov 2025 22:51:30 +0100
Subject: [PATCH] Fix name clash in v-for directives

---
 collagraph/sfc/compiler.py  | 12 +++++++++++-
 tests/test_directive_for.py | 29 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/collagraph/sfc/compiler.py b/collagraph/sfc/compiler.py
index ffb19c9..7cc7cd3 100644
--- a/collagraph/sfc/compiler.py
+++ b/collagraph/sfc/compiler.py
@@ -675,8 +675,18 @@ def create_children(
                     if parent_node.tag and parent_node.tag[0].isupper():
                         attributes.append(ast_set_slot_name(el, "default"))
 
+            # Check if this tag is a loop variable (from v-for)
+            # Loop variables should not be treated as components
+            is_loop_variable = any(
+                child.tag in loop_vars
+                for loop_dict in list_names
+                for loop_vars in loop_dict.values()
+            )
+
             is_component = (
-                child.tag in names or child.tag[0].isupper() or "." in child.tag
+                (child.tag in names and not is_loop_variable)
+                or child.tag[0].isupper()
+                or "." in child.tag
             )
             result.append(
                 ast_create_fragment(
diff --git a/tests/test_directive_for.py b/tests/test_directive_for.py
index 82659ba..502b38a 100644
--- a/tests/test_directive_for.py
+++ b/tests/test_directive_for.py
@@ -698,3 +698,32 @@ def on_button(self, value):
         handler()
 
     assert calls == ["first", "second"]
+
+
+def test_for_context_and_naming(parse_source):
+    """
+    Make sure that using a loop variable can have the same
+    name as an element.
+    """
+    Items, _ = parse_source(
+        """
+        <item
+          v-for="item in items"
+          :value="item['value']"
+        />
+        <script>
+        import collagraph as cg
+        class Items(cg.Component):
+            pass
+        </script>
+        """
+    )
+    state = reactive({"items": [{"value": "a"}, {"value": "b"}]})
+
+    gui = Collagraph(DictRenderer())
+    container = {"type": "root"}
+    gui.render(Items, container, state)
+
+    first_item, second_item = container["children"]
+    assert first_item["attrs"]["value"] == "a"
+    assert second_item["attrs"]["value"] == "b"