Метод rendered
Метод rendered класса Component
является хуком жизненного цикла Livewire.
Он вызывается автоматически после того,
как шаблон компонента был полностью отрендерен
и преобразован в HTML-строку.
Этот метод полезен для выполнения логики,
которая должна произойти после рендеринга,
например, для логирования, изменения глобального состояния
или запуска событий, которые должны сработать
только после того, как HTML компонента сформирован.
Метод принимает строку $view,
содержащую сгенерированный HTML.
Синтаксис
<?php
protected function rendered($view)
{
// Логика после рендера
}
?>
Пример
Давайте добавим логирование после того, как компонент будет отрендерен:
<?php
namespace AppLivewire;
use LivewireComponent;
use IlluminateSupportFacadesLog;
class Logger extends Component
{
public $message = 'Hello, World!';
protected function rendered($view)
{
Log::info('Component rendered successfully.');
Log::info('Generated HTML: ' . $view);
}
public function render()
{
return view('livewire.logger');
}
}
?>
<div>
<h1>{{ $message }}</h1>
<p>Check the logs for render information.</p>
</div>
Каждый раз при рендеринге компонента в лог-файл будет записываться сообщение и сгенерированный HTML.
Пример
Используем метод rendered
для запуска JavaScript-события
после обновления компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
class Notifier extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
protected function rendered($view)
{
$this->dispatch('componentRendered', ['count' => $this->count]);
}
public function render()
{
return view('livewire.notifier');
}
}
?>
<div>
<button wire:click="increment">Increment</button>
<span>Count: {{ $count }}</span>
</div>
window.addEventListener('componentRendered', (event) => {
const detail = event.detail;
console.log('Component rendered with count:', detail.count);
});
После каждого рендеринга будет отправляться событие
componentRendered, которое можно перехватить
на клиентской части для выполнения JavaScript-кода.
