如何将按钮用作Livewire切换器？解决状态更新失效问题

问题根源在于按钮不属于表单控件，不支持wire:model指令。你在按钮上添加wire:model="collapsed"后，会干扰Livewire的状态同步逻辑，导致每次调用toggleCollapsed时，组件获取的$collapsed始终是初始值，无法正常切换状态。

修正步骤 #

1. 移除按钮上的wire:model="collapsed"，仅保留wire:click="toggleCollapsed"
2. 保持toggleCollapsed方法内的逻辑不变（Livewire会自动同步状态到前端，无需额外手动通知）

修正后的代码 #

Blade视图代码：

<div>
    <button wire:click="toggleCollapsed">
        @if ($collapsed)
            显示折叠状态图标
        @else
            显示展开状态图标
        @endif
    </button>
</div>

Livewire组件PHP代码：

public function toggleCollapsed(): void
{
    $this->collapsed = !$this->collapsed;
    // 这里可以保留你的复杂业务逻辑
}

补充说明 #

之前的checkbox能正常工作，是因为checkbox属于表单控件，原生支持wire:model双向绑定；而按钮不具备表单控件的状态绑定特性，强行使用wire:model会导致状态同步异常。

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