Laravel Livewire 是否可以在渲染视图后更改变量?

Laravel Livewire Is it possible to change a variable after the view has been rendered?

我想加载视图然后更新可变数据以停止加载页面需要很长时间(加载大量数据)。 Laravel livewire 这可能吗?

我试图让 livewire 渲染视图,然后在页面加载后更新 public 变量。在我的例子中,我将从 api 获取数据,因此我希望用户看到该页面,然后我可以在获取数据时添加一些加载微调器。

但是,根据我的测试和查看 livewire lifecycle,我的测试变量没有更新。

示例 Livewire 控制器

class Example extends Component
{
    public $test;

    public function mount()
    {
        $this->test = 'hi';
    }

    public function render()
    {
        return view('livewire.example');
    }

    public function hydrate()
    {
        $this->test = 'TEST1';
    }

    public function hydrateTest()
    {
        $this->test = 'TEST2';
    }

    public function dehydrate()
    {
        $this->test = 'TEST3';
    }
}

示例 Livewire Blade

<div>
    <p>Hello World</p>
    <p>{{ $test }}</p>
</div>

生命周期钩子说 dehydrate 在 render() 之后运行,这意味着 $test 应该 = 'TEST3 但它保持 'hi',我的初始状态。

似乎还有 javascript 钩子,比如当组件被初始化时。但我不确定如何从那里调用 livewire 函数或变量。

有人知道如何在渲染视图后更新 livewire 变量吗?

您可以在页面首次呈现后初始化数据,尽管 wire:init 指令。

你的blade看起来像

<div wire:init="loadData">
    <p>Hello World</p>
    <p>{{ $test }}</p>
</div>

你的组件会有一个方法 loadData(),你可以在其中调用 API。

class Example extends Component
{
    public $test;

    public function mount()
    {
        $this->test = 'hi';
    }

    public function loadData()
    {
        $this->test = 'Data loaded';
    }

    public function render()
    {
        return view('livewire.example');
    }
}

有关更多示例,请参阅 deferred loading 上的官方文档。