如何在窗口focus事件触发时更新Livewire组件类的变量？

步骤1：修改Livewire组件类 (MyLivewireComponent.php) #

在组件中新增一个刷新数据的方法，负责重新获取最新的Person集合：

<?php
namespace App\Livewire;

use Livewire\Component;
use App\Models\Person;

class MyLivewireComponent extends Component {
    public $persons;

    public function mount() {
        $this->persons = Person::all();
    }

    // 新增方法：重新获取Person最新数据
    public function refreshPersons() {
        $this->persons = Person::all();
    }

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

步骤2：修改Blade视图 (my-livewire-component.blade.php) #

添加JavaScript监听浏览器窗口的focus事件，触发组件的刷新方法，自动更新下拉列表：

<select>
    @foreach($persons as $person)
    <option value="{{ $person->id }}">{{ $person->name }}</option>
    @endforeach
</select>

<script>
    // 窗口获得焦点时，调用Livewire组件的刷新方法
    window.addEventListener('focus', () => {
        @this.refreshPersons();
    });
</script>

实现逻辑 #

当用户切换回浏览器窗口时，window.focus事件被触发，通过@this.refreshPersons()调用后端组件的方法，重新从数据库拉取最新的Person数据。Livewire会自动将更新后的$persons同步到前端，替换下拉列表中的选项，确保用户看到的始终是最新数据。

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