我想在JavaScript中监听livewire发出的事件并执行一些操作。JavaScript确实监听了livewire事件,但它不会停止执行。理想情况下,它应该只对每个发出的事件执行一次。这是我的Laravel livewire组件:
protected $listeners = [
'reportFilterUpdated' => 'reportFilterUpdated',
'eventListened' => 'eventListened',
];
public function render()
{
$this->generateChartData();
return view('dashboard');
}
public function generateChartData()
{
// Some other non-related codes
$this->emit('reportFilterUpdated');
}
这是我的JavaScript:
document.addEventListener('DOMContentLoaded', () => {
Livewire.on('reportFilterUpdated', _ => {
console.log('event listened');
});
});
导致浏览器的控制台(显然,函数不会停止执行):
dashboard.js:(97)已侦听事件
关于如何使它对每个发出的事件只执行一次,你有什么想法吗?
我希望“事件侦听”只在控制台上打印一次。打印的次数应该取决于从我的组件发出事件的次数。1次发出= 1个控制台日志。希望有人能帮助,非常感谢。
1条答案
按热度按时间qxsslcnc1#
在Livewire中,每一次改变,组件本身都会重新呈现,甚至是表单的改变或按钮的点击。
每次都会调用
render()
函数。在您的例子中,每次更改都在
render()
函数中调用$this->generateChartData();
,因此每次组件更改时,都会调用render函数并运行generateChartData()
函数,其中包含emit。因此,每次进行更改时,
render()
都会调用$this->generateChartData();
,每次它都会发出事件,JavaScript会侦听它。保持渲染函数的原样通常是一个好习惯。
如果只想运行一次,那么使用
mount()
函数,该函数只在呈现组件ITSELF时运行一次。以下是Livewire文档中有关
mount()
函数的片段: