使用Alpine.js实现for循环并动态显示条目标题失败问题

你的问题主要出在两个关键细节上：

1. 缺少Alpine作用域标识 #

Alpine.js的指令（比如x-for）必须在带有x-data的元素内部才能生效。你当前的x-for所在的<div>没有被Alpine识别为作用域，导致循环逻辑根本没执行。

解决方法：给包含x-for的元素加上x-data="{}"，让Alpine接管这个区域：

<div class="content__mid" x-data="{}" x-for="item in $store.products.items" :key="item.id">
    <p class="content__mid-item" x-text="item.title"></p>
</div>

2. HTML注释格式错误 #

你在HTML里用了// html和// the content is empty here这种JS单行注释，HTML里应该用<!-- 注释内容 -->格式，否则会导致浏览器解析出错，影响Alpine正常运行。

修正后的完整代码：

<div class="content__mid" x-data="{}" x-for="item in $store.products.items" :key="item.id">
    <p class="content__mid-item" x-text="item.title"></p> <!-- 这里改为HTML注释格式 -->
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('products', {
        items: [
            {
                id: 1,
                title: 'Aspirin',
                country: 'USA',
                manufacturer: 'Bangladesh',
                price: '120',
                validDate: '02.10.2024'
            },
            {
                id: 2,
                title: 'Aspirin',
                country: 'Italy',
                manufacturer: 'Bangladesh',
                price: '120',
                validDate: '02.10.2024'
            },
            {
                id: 3,
                title: 'Aspirin',
                country: 'Austria',
                manufacturer: 'Bangladesh',
                price: '140',
                validDate: '02.10.2024'
            }
        ]
    })
})
</script>

额外检查 #

确保你已经正确引入Alpine.js脚本，比如在页面底部添加：

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

内容的提问来源于stack exchange，提问作者user20984971