Livewire.on()
Метод Livewire.on используется для регистрации обработчиков событий на стороне JavaScript. Он принимает два параметра: имя события (строку) и коллбэк-функцию, которая будет выполнена при наступлении этого события. Данные, переданные вместе с событием из компонента, доступны в коллбэке как аргументы.
Синтаксис
Livewire.on('eventName', (params) => {
// Your JavaScript code
});
Пример
Давайте отправим событие из компонента при клике на кнопку и обработаем его в JavaScript с помощью Livewire.on:
<?php
namespace App\Livewire;
use Livewire\Component;
class EventExample extends Component
{
public function triggerEvent()
{
$this->dispatch('showAlert', 'Hello from Livewire!');
}
public function render()
{
return view('livewire.event-example');
}
}
?>
<div>
<button wire:click="triggerEvent">
Show alert
</button>
</div>
Livewire.on('showAlert', (message) => {
alert(message);
});
Результат выполнения кода:
<button>
Show alert
</button>
<span>alert("Hello from Livewire!")</span>
Пример
Теперь отправим несколько параметров из компонента:
<?php
namespace App\Livewire;
use Livewire\Component;
class EventExample extends Component
{
public function triggerEvent()
{
$this->dispatch('updateCounter', 10, 'User clicked button');
}
public function render()
{
return view('livewire.event-example');
}
}
?>
<div>
<button wire:click="triggerEvent">
Update counter
</button>
</div>
Livewire.on('updateCounter', (count, message) => {
console.log(`Counter: ${count}, Message: ${message}`);
});
Результат выполнения кода в консоли браузера:
"Counter: 10, Message: User clicked button"
Пример
Покажем, как использовать Livewire.on для обновления DOM-элемента на странице без перезагрузки компонента:
<?php
namespace App\Livewire;
use Livewire\Component;
class EventExample extends Component
{
public function triggerEvent()
{
$this->dispatch('updateElement', 'New text content');
}
public function render()
{
return view('livewire.event-example');
}
}
?>
<div>
<button wire:click="triggerEvent">
Update text
</button>
<div id="targetElement">
Original text
</div>
</div>
Livewire.on('updateElement', (newText) => {
document.getElementById('targetElement').textContent = newText;
});
Результат выполнения кода:
<button>
Update text
</button>
<div id="targetElement">
New text content
</div>
