时间戳

首页 > 解决方案 > Livewire - 从组件强制更新视图

php - Livewire - 从组件强制更新视图

问题描述

我有一个 Livewire 组件，我想用它做一些异步操作。但是，我无法弄清楚如何在需要时强制刷新更新。

为了说明问题，请查看下面的示例。

想像我正在尝试创建一个秒表。我将单击一个按钮来启动秒表，每次 $counter 更改时，我都想将值发送到我的视图。

class MyComponent extends Component {
   public $counter = 0;

   public function startTimer() {
       for ($i = 0; $i < 10; $i++) {
           $this->counter = $this->counter + 1;
           // I want to tell "send data to view/update data in view here"

           sleep(3);   
       }      
   } 
}

<button wire:click="startTimer">Start</button>
<h1>{{ $counter }}</h1>

这是一个虚拟的例子，我不想用轮询来做。

有没有办法告诉组件类似的东西$this->updateDataInView()？

标签： phplaravellaravel-livewire

解决方案

在 Livewire 中，您可以使用魔术方法$refresh手动刷新视图。

选项1，在视图中

<div>
    <button wire:click="$refresh">Reload Component</button>
</div>

另请参阅有关此的博客文章。

选项2，在组件类内部

protected $listeners = [
    'refreshComponent' => '$refresh'
];

当然，在这里您需要发出refreshComponent事件。

有一个关于这个主题的Github 讨论。

推荐阅读