时间戳

首页 > 解决方案 > Laravel Livewire 视图渲染后是否可以更改变量？

php - Laravel Livewire 视图渲染后是否可以更改变量？

问题描述

我想加载视图然后更新变量数据以停止页面加载时间（加载大量数据）。Laravel livewire 可以做到这一点吗？

我试图让 livewire 呈现视图，然后在页面加载后更新公共变量。就我而言，我将从 api 获取数据，因此我希望用户查看页面，然后我可以在获取数据的同时添加一些加载微调器。

但是，根据我的测试并查看livewire 生命周期，我的测试变量没有更新。

示例 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';
    }
}

活线刀片示例

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

生命周期钩子说脱水在渲染（）之后运行，这意味着 $test 应该 = 'TEST3 但它保持为'hi'，我的初始状态。

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

有谁知道在视图渲染后如何更新 livewire 变量？

标签： phplaravellaravel-livewire

解决方案

您可以在页面第一次呈现后初始化数据，尽管该wire:init指令。

你的刀片看起来像

<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');
    }
}

有关更多示例，请参阅有关延迟加载的官方文档。

推荐阅读