如何在JavaScript中正确获取并使用Laravel Livewire 3事件返回值？

云上老周

2026-7-14

解决Laravel Livewire 3中创建公司后同步选中问题

问题根源

你当前的实现存在两个核心问题：

PHP变量无法在单引号 heredoc 中解析：使用<<<'JS'单引号包裹的 heredoc 时，内部的$id作为PHP变量不会被解析为实际公司ID，导致JS代码执行时$id未定义。
无需通过JS设置Livewire属性：Livewire的核心特性就是PHP与前端属性自动同步，直接在PHP方法中更新公共属性即可，完全没必要绕JS操作。

修正方案

1. 修改Create组件的`updateCompany`方法

直接在PHP层更新company_id，并刷新组件确保新创建的公司出现在选项列表中：

#[On('update-selected-company')]
public function updateCompany($id)
{
    // 直接设置PHP属性，Livewire会自动同步到前端
    $this->company_id = $id;
    
    // 刷新组件，让Computed的companies属性重新加载，包含新创建的公司
    $this->dispatch('$refresh');
}

2. 确保前端select标签正确绑定

在Create组件的Blade视图中，select必须通过wire:model绑定到company_id，这样属性更新后会自动选中对应选项：

<select wire:model="company_id">
    <option value="">请选择公司</option>
    @foreach($companies as $company)
        <option value="{{ $company->id }}">{{ $company->name }}</option>
    @endforeach
</select>

原代码失效的具体原因

单引号 heredoc（<<<'JS'）会将内容视为纯字符串，PHP变量$id不会被替换为实际值，JS执行时会触发$id is not defined错误。
即使你改用双引号 heredoc 解析$id，通过$wire操作属性也是多此一举——Livewire原生的属性同步机制更可靠，还能避免异步延迟（比如你添加的250ms setTimeout）带来的不确定性。