如何在Livewire组件类中更新一个变量，当窗口获取焦点时发生？

Question

我的 Livewire 组件

在以下的 MyLivewireComponent.php 文件中，定义了一个 Livewire 组件，用于展示人员列表：

persons = Person::all();
    }

    public function render() {
        return view('livewire.my-livewire-component');
    }
}
?>

当浏览器窗口获得焦点（触发 focus 事件）时，我希望通过重新执行以下语句来更新 $persons 变量的内容和值：

$this->persons = Person::all();

这样，如果有新增人员，就能确保始终获取到最新的人员集合。

对应的 Blade 视图文件 my-livewire-component.blade.php 如下：

这样，用户回到 web 应用时，下拉列表始终保持最新状态。

问题在于：如何在浏览器窗口获得焦点时，更新 Livewire 组件类中的变量？

Sebastien Lorber · Answer

如果你正在使用 AlpineJS，可以利用其 x-on 方法。借助这一机制，你可以触发事件来调用 Livewire 方法，从而更新人员列表。

示例：

相关资源：

Didzis Elferts · Answer

我通过以下方式实现了所需功能：

MyLivewireComponent.php

persons = Person::all();
    }

    public function render() {
        return view('livewire.my-livewire-component');
    }

    // 步骤 2 - 在服务器端处理事件
    #[On('updatePersons')]
    public function updatePersons() {
        $this->persons = Person::all();

        // 步骤 3 - 告知客户端有更新发生
        $this->dispatch('personsUpdated');
    }
}
?>

my-livewire-component.blade.php

版本信息

| Laravel | Livewire |
| --- | --- |
| v10.35.0 | v3.2.6 |