Livewire - 从组件强制更新视图

Question

我有一个 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() 之类的东西？

Answer 1

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

选项 1，在视图中

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

另请参阅blog post。

选项 2，在组件类中

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

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

有一个Github discussion围绕这个话题。