x-data within x-for

[gravataLonga]

Hello,

Probably this a bug for alpinejs-devtools, i know there are some edges cases when use x-data inside a x-for. But looks like in my case i'm getting an error for extension and not from alpinejs.

<!-- Loop for Nodes -->
<template x-for="(node, index) in nodes">
    <div>
        <!-- Box -->
        <template x-if="node.type == 'squareBox'" :key="index">
            <x-editor.nodes.box.canva />
        </template>
        <!-- /Box -->
    </div>
</template>
<!-- /Loop for Nodes -->

At my end, this work fine in browser, but when i'm using debugger, and hovering each node tag i'm getting error.

You guys can confirm same behavior ?

Best Regards, Jonathan Fontes

[gravataLonga]

Problem was related how i was building my x-for syntax.

Instead of:

<!-- Loop for Nodes -->
<template x-for="(node, index) in nodes">
    <div>
        <!-- Box -->
        <template x-if="node.type == 'squareBox'" :key="index">
            <x-editor.nodes.box.canva />
        </template>
        <!-- /Box -->
    </div>
</template>
<!-- /Loop for Nodes -->

need to be:

<!-- Loop for Nodes -->
- <template x-for="(node, index) in nodes">
+ <template x-for="(node, index) in nodes" :key="index">

    <div>
        <!-- Box -->
-         <template x-if="node.type == 'squareBox'" :key="index">
+         <template x-if="node.type == 'squareBox'">
            <x-editor.nodes.box.canva />
        </template>
        <!-- /Box -->
    </div>
</template>
<!-- /Loop for Nodes -->