1. 首页
  2. 问题列表
  3. Laravel Livewire在渲染视图后是否可以更改变量？
提问者：小点点

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

示例Livewire刀片

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

lifecycle钩子说dehydrate在render（）之后运行，这意味着$test应该='TEST3，但它保持为'hi'，我的初始状态。

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

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


共1个答案

匿名用户

您可以在页面第一次呈现后初始化数据，尽管使用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');
    }
}

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

相关问题