Alpine.js数组填充失败：无法渲染价格数据求助

问题根源 #

你的代码存在几个关键错误，导致数据无法正常渲染：

• 局部状态与全局Store脱节：组件x-data里定义了variants: []，但请求数据后把结果存到了Alpine.store('variants')，模板遍历的是局部variants，两者完全没有关联。
• 错误的变量赋值：fetchVariants里的variants = ...是创建全局变量，不是更新组件自身的variants状态，组件根本感知不到数据变化。
• 多余的子上下文：列表外层的<div x-data>会创建独立的Alpine上下文，导致上层的variants无法被内层模板访问。
• 低效的DOM查询：用document.querySelector查找元素不如直接利用组件上下文获取属性。
• 不合法的x-for key：用整个price对象作为:key不符合要求，Alpine需要字符串/数字类型的唯一标识。

修正后的完整代码 #

@{
    int MOOD = 167;
}
<div x-data="{ 'showModal': false, variants: [] }" 
     x-init="async () => {
        const productId = $el.getAttribute('data-product-id');
        const url = `/Home/ProductDesc?ProductId=${productId}`;
        try {
            const res = await fetch(url);
            const data = await res.json();
            variants = data.variant.map(item => ({ price: item.price }));
        } catch (error) {
            console.error('Error:', error);
        }
     }" 
     data-product-id="@MOOD">

    <!-- Trigger for Modal -->
    <button type="button" @click="showModal = true">Open Modal</button>

    <!-- Modal -->
    <div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto" x-show="showModal">
        <!-- Modal inner -->
        <div class="max-w-3xl px-6 py-4 mx-auto text-left bg-white rounded shadow-lg" @click.away="showModal = false"
             x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90"
             x-transition:enter-end="opacity-100 scale-100">
            <!-- Title / Close-->
            <div class="flex items-center justify-between">
                <h5 class="mr-3 text-black max-w-none">Title</h5>

                <button type="button" class="z-50 cursor-pointer" @click="showModal = false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <!-- 移除多余的x-data，保留上层上下文 -->
            <div>
                <ul>
                    <!-- 用item.price作为唯一key，有唯一ID的话用ID更稳妥 -->
                    <template x-for="item in variants" :key="item.price">
                        <li>
                            <p>Price: <span x-text="item.price"></span></p>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>

关键修改说明 #

1. 直接在x-init中处理请求：用箭头函数访问组件上下文，通过$el直接获取当前组件的data-product-id，无需全局DOM查询。
2. 更新组件自身状态：请求完成后直接赋值给组件的variants，Alpine会自动追踪状态变化并触发视图更新。
3. 移除多余的x-data容器：避免创建独立上下文，让内层模板能直接访问上层的variants数组。
4. 修正x-for遍历逻辑：遍历variants中的每个对象，用item.price作为唯一key，同时用x-text替代x-html（纯文本渲染更安全）。
5. 简化事件绑定：把@@click改为@click（Razor视图中无需转义）。

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