AlpineJS如何实现嵌套数组遍历？新手技术咨询

你的代码问题在于AlpineJS的<template x-for>要求内部必须只有一个根元素，你当前在外层循环的template里直接放置了<p>和内层循环的template，这会导致循环逻辑失效。

修正后的代码如下：

<body>
    <div x-data="comments()">
        <template x-for="comment in commentsList" :key="comment.createdAt">
            <!-- 给每个评论项添加根容器，确保template内只有一个顶级元素 -->
            <div class="comment">
                <p x-text="comment.text"></p>
                <!-- 内层回复循环，作用域继承自外层的comment -->
                <template x-for="reply in comment.replies" :key="reply.createdAt">
                    <p class="reply" x-text="reply.text"></p>
                </template>
            </div>
        </template>
    </div>
</body>
<script>
    const comments = () => {
        return {
            commentsList: [
                {
                    "createdAt": "20.01",
                    "text": "Hello all how can i use double cycle in alpinejs?",
                    "replies": [
                        {
                            "createdAt": "21.01",
                            "text": "I dont know?"
                        },
                        {
                            "createdAt": "22.01",
                            "text": "What is written in official doc?"
                        }
                    ]
                },
                {
                    "createdAt": "23.01",
                    "text": "How to show replies?",
                    "replies": [
                        {
                            "createdAt": "24.01",
                            "text": "It is not possible right now"
                        }
                    ]
                }
            ]
        }
    }
</script>

关键修正点：

• 外层循环的template内部新增了<div class="comment">作为根容器，确保每个循环项只有一个顶级元素
• 给每个x-for添加了:key属性（推荐做法，帮助AlpineJS跟踪元素身份，提升渲染性能）
• 将变量名从i改为comment，提升代码可读性

这样修改后，嵌套循环就能正常遍历评论和对应的回复了。

内容的提问来源于stack exchange，提问作者St.Vladislav