当窗口焦点事件发生时，如何更新Livewire组件类的变量？

Question

MyLivewireComponent.php

<?php
namespace App\Livewire;

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

class MyLivewireComponent extends Component {
    public $persons;

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

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

当浏览器窗口获得焦点时（

focus

事件），我只想通过

重新执行

语句来更新$persons变量的内容和值：

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

这样，如果该集合中有任何补充，它将获得新的综合列表。

这是因为在我的刀片上...

my-livewire-component.blade.php

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

这将确保用户返回 Web 应用程序后下拉列表始终更新。

这让我回到我的问题。当窗口焦点事件发生时，如何更新Livewire组件类的变量？

Answer 1

如果您使用 AlpineJS，您可以使用 x-on 方法。使用此句柄，您可以触发事件来执行更新人员列表的 Livewire 方法。

示例：

 <div x-on:blur="Livewire.dispatch('windowRefocused')">

Livewire 活动

AlpineJS x-on 指令