Livewire状态切换按钮点击后无法再次触发问题排查

问题原因 #

按钮点击后无法再次触发的核心问题：

1. wire:click引号嵌套语法错误：视图代码中wire:click属性用单引号包裹内容，但内部状态判断逻辑也使用了单引号，导致HTML渲染后属性值出现语法冲突，状态更新后点击事件绑定失效。
2. 视图硬编码传递目标状态存在同步隐患：依赖视图计算目标状态并传递给组件方法，当组件数据更新后，视图表达式可能无法正确同步新状态的计算逻辑。

修复方案 #

方案1：修复引号嵌套，改用Livewire原生表达式 #

调整wire:click的引号使用方式，或直接使用Livewire表达式写法避免blade编译的引号冲突：

<button
    wire:click="changeStatus({{ $license->id }}, $license->status === 'active' ? 'inactive' : 'active')"
    wire:loading.attr="disabled"
    key="{{ $license->id . '-' . $license->status }}"
    class="{{ $license->status == 'active' ? 'border-orange-500 hover:bg-orange-600' : 'border-black hover:bg-gray-700' }} border-2 text-black hover:text-white px-4 py-2 rounded-lg transition">
    {{ $license->status == 'active' ? 'Blokkolás' : 'Feloldás' }}
</button>

方案2：将状态切换逻辑移至组件方法（更推荐） #

不在视图中计算目标状态，由组件方法自动根据当前License状态完成切换，彻底避免视图与组件的数据同步问题：

1. 修改组件的changeStatus方法：

public function changeStatus($license_id)
{
    $license = License::findOrFail($license_id);
    $newStatus = $license->status === 'active' ? 'inactive' : 'active';
    $license->update(['status' => $newStatus]);

    session()->flash('status-message','Sikeresen megváltoztattad a license státuszát!');
}

2. 简化视图按钮代码：

<button
    wire:click="changeStatus({{ $license->id }})"
    wire:loading.attr="disabled"
    key="{{ $license->id . '-' . $license->status }}"
    class="{{ $license->status == 'active' ? 'border-orange-500 hover:bg-orange-600' : 'border-black hover:bg-gray-700' }} border-2 text-black hover:text-white px-4 py-2 rounded-lg transition">
    {{ $license->status == 'active' ? 'Blokkolás' : 'Feloldás' }}
</button>

额外说明 #

• 你设置的key="{{ $license->id . '-' . $license->status }}"是正确的，它能确保状态变化后Livewire重新渲染按钮元素，避免DOM复用导致的事件绑定问题。
• 当前render方法每次都会重新加载$licenses，这部分逻辑无需调整，能保证数据实时同步。

内容的提问来源于stack exchange，提问作者Áron Papp