传入x-data的参数已变更，但CSS类未生效的问题排查

你遇到的问题核心在于：Alpine.js 的 highlight 变量仅在组件首次渲染时通过 @js($highlight) 完成初始化，当 Livewire 更新后端的 $highlight 值后，Alpine 并不会自动同步这个新值，导致 highlight == 1 的判断始终沿用初始化时的旧值，最终 CSS 类无法生效。

以下是几种直接可行的修复方式，按需选择即可：

方案1：直接在 Alpine 的类条件中使用 Livewire 变量 #

不需要在 Alpine 的 x-data 中存储 highlight，直接引用 Livewire 的 $highlight 变量。当 Livewire 更新组件时，Blade 会重新渲染这个条件，Alpine 会自动应用新的类：

<div
    x-data="{ hover: false }"
    @mouseover="hover = true"
    @mouseout="hover = false"
    :class="{ 'bg-slate-700': hover || {{ $highlight == 1 }} }">
    highlight: {{ $highlight }}
</div>

方案2：让 Alpine 同步 Livewire 的更新 #

通过 Livewire 的事件系统，在更新活跃项后通知 Alpine 更新 highlight 变量：

组件代码修改 #

<div
    x-data="{ hover: false, highlight: @js($highlight) }"
    x-init="$wire.on('activeItemUpdated', () => { highlight = @js($highlight) })"
    @mouseover="hover = true"
    @mouseout="hover = false"
    :class="{ 'bg-slate-700': hover || highlight == 1 }">
    highlight: {{ $highlight }}
</div>

Livewire 方法修改 #

在 selectActiveItem 方法中添加事件分发：

public function selectActiveItem($item)
{
    // 你的业务逻辑：设置当前活跃项
    $this->activeItem = $item;

    // 分发事件通知 Alpine 更新变量
    $this->dispatch('activeItemUpdated');
}

方案3：结合 Livewire 的 wire:class 和 Alpine 的 hover 状态 #

用 Livewire 的 wire:class 处理活跃状态，Alpine 处理 hover 状态，两者结合实现需求：

<div
    x-data="{ hover: false }"
    @mouseover="hover = true"
    @mouseout="hover = false"
    wire:class="bg-slate-700: {{ $highlight == 1 }}"
    :class="{ 'bg-slate-700': hover }">
    highlight: {{ $highlight }}
</div>

• 确认 Tailwind CSS 的 bg-slate-700 类名拼写正确，且项目已正确配置 Tailwind。
• 确认 isActiveItem() 方法返回的是整数 1（而非字符串 "1"），如果是字符串，需将判断条件改为 highlight == '1' 或 $highlight === '1'。

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