如何在Alpine.js指令中使用Blade变量？解决语法报错问题

错误原因 #

你遇到的语法错误本质是Blade的:class属性绑定与Alpine.js变量冲突：:class是Blade的PHP表达式绑定语法，它会把你写的(rating >= {{ $i }} && rating != 0) || hover >= {{ $i }}当成PHP代码解析，但rating和hover是Alpine.js的前端变量，并非PHP变量，导致Blade解析失败，错误提示指向x-on:click行属于解析器的误报。

修正方案 #

将类名切换逻辑交给Alpine.js处理，用x-bind:class替代Blade的:class，同时确保Blade变量$i能正确传递给Alpine表达式。

方案1：直接渲染Blade变量到Alpine表达式 #

<div x-data="{ rating: @entangle('rating'), hover: 0 }">
    @for ($i = 1; $i <= 5; $i++)
        <x-heroicon-s-star
            x-on:click="rating = {{ $i }}"
            x-on:mouseover="hover = {{ $i }}"
            x-on:mouseout="hover = 0"
            class="star w-8 h-8 cursor-pointer"
            x-bind:class="(rating >= {{ $i }} && rating !== 0) || hover >= {{ $i }} ? 'text-yellow-500' : 'text-gray-300'"
        />
    @endfor
    <input type="hidden" x-bind:value="rating" name="rating">
</div>

方案2：通过data属性传递Blade变量（更解耦） #

将Blade变量$i存储到元素的data-*属性中，Alpine通过$el.dataset读取，避免直接在表达式中混合Blade语法：

<div x-data="{ rating: @entangle('rating'), hover: 0 }">
    @for ($i = 1; $i <= 5; $i++)
        <x-heroicon-s-star
            data-star-index="{{ $i }}"
            x-on:click="rating = parseInt($el.dataset.starIndex)"
            x-on:mouseover="hover = parseInt($el.dataset.starIndex)"
            x-on:mouseout="hover = 0"
            class="star w-8 h-8 cursor-pointer"
            x-bind:class="(rating >= parseInt($el.dataset.starIndex) && rating !== 0) || hover >= parseInt($el.dataset.starIndex) ? 'text-yellow-500' : 'text-gray-300'"
        />
    @endfor
    <input type="hidden" x-bind:value="rating" name="rating">
</div>

功能验证 #

两种方案都能实现你的需求：

• 鼠标悬停到第n颗星时，hover值被设为n，所有索引≤n的星都会触发text-yellow-500类，显示黄色
• 点击某颗星时，rating值被设为对应索引，选中的星及前面的星会保持黄色状态

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