Laravel Livewire 3.1.0：未调用变量随其他变量异常变更求助

核心问题：语法错误导致意外属性赋值 #

在Modal Component的setDepartmentDropdown方法中，存在一个关键语法错误：

$this->$departmentDropdown = false;

这里的$departmentDropdown前面多了一个$，会将departmentDropdown的当前值（true或false）作为动态属性名进行赋值。例如当departmentDropdown为true时，代码会尝试执行$this->true = false;，这会意外创建或修改组件的无关属性，进而干扰其他变量的状态。

正确写法：

$this->departmentDropdown = false;

其他需要修复的问题 #

1. 关闭Modal方法缺少分号
   closeModal方法中dispatch语句末尾缺少分号，会引发语法错误：

public function closeModal(){
    $this->dispatch('close-modal'); // 添加分号
}

2. wire:click传参的正确写法
   Modal视图循环中，传递参数无需用Blade的{{ }}包裹（会导致额外转义问题），直接使用Livewire支持的变量传递方式；若部门名称含特殊字符，用addslashes处理避免XSS：

<button wire:click="setDepartmentDropdown({{ $department->id }}, '{{ addslashes($department->department_name) }}')">
    {{ $department->department_name }}
</button>

3. 子组件状态重置（可选）
   若需要每次打开Modal时清空之前的选择状态，可在Modal Component的mount方法中初始化变量；同时给子组件添加wire:key，确保每次打开Modal时组件完全重建：

// Modal Component逻辑代码
public function mount()
{
    $this->departmentValue = '';
    $this->departmentId = '';
    $this->departmentDropdown = false;
}

{{-- Table Component视图 --}}
@if($showModal)
    @livewire('modal-component', key('modal-'.now()->timestamp))
@endif

修复后的完整代码示例 #

Table Component #

{{-- Blade视图 --}}
<div>
    {{-- ... --}}
    <button wire:click="openModal">Open Modal</button>
    
    @if($showModal)
        @livewire('modal-component', key('modal-'.now()->timestamp))
    @endif
</div>

// 逻辑代码
public $showModal = false;

public function openModal(){ 
    $this->showModal = true; 
}

#[On('close-modal')]
public function closeModal() {
    $this->showModal = false;
}

Modal Component #

// 逻辑代码
public $departmentValue = '', $departmentId = '', $departmentDropdown = false;

public function mount()
{
    $this->departmentValue = '';
    $this->departmentId = '';
    $this->departmentDropdown = false;
}

public function toogleDepartmentDropdown(){
    $this->departmentDropdown = !$this->departmentDropdown;
}

public function setDepartmentDropdown($id, $value){
    $this->departmentId = $id;
    $this->departmentValue = $value;
    $this->departmentDropdown = false;
}

public function closeModal(){
    $this->dispatch('close-modal');
}

{{-- Blade视图 --}}
<div>
    <button wire:click="closeModal">Icon Close Button</button>
    
    <button wire:click="toogleDepartmentDropdown">
        {{ $departmentValue ?? '-' }}
    </button>
    @if($departmentDropdown)
        <div>
            @foreach(App\Models\Department::all() as $department)
                <button wire:click="setDepartmentDropdown({{ $department->id }}, '{{ addslashes($department->department_name) }}')">
                    {{ $department->department_name }}
                </button>
            @endforeach
        </div>
    @endif
</div>

内容的提问来源于stack exchange，提问作者Emmanuel Sierra Morales