Директива wire:load

Директива wire:load позволяет выполнить метод компонента Livewire в момент, когда элемент появляется в DOM. Это особенно полезно для инициализации данных, загрузки контента из внешних источников или выполнения действий при первом рендеринге компонента. В значение передаётся имя публичного метода, который будет вызван автоматически.

Синтаксис

<div wire:load="methodName">
	Содержимое
</div>

Пример

Давайте увеличим число $num на 1 при загрузке элемента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function increment()
		{
			$this->num++;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div wire:load="increment">
	Число: {{ $num }}
</div>

Результат выполнения кода:

<div>
	Число: 1
</div>

Пример

Давайте загрузим список статей из внешнего источника при загрузке компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ArticleList extends Component
	{
		public $articles = [];
		
		public function loadArticles()
		{
			$this->articles = [
				'Article 1',
				'Article 2',
				'Article 3',
				'Article 4',
				'Article 5',
			];
		}
		
		public function render()
		{
			return view('livewire.article-list');
		}
	}
?>

<div wire:load="loadArticles">
	@if (count($articles) > 0)
		<ul>
			@foreach ($articles as $article)
				<li>{{ $article }}</li>
			@endforeach
		</ul>
	@else
		<p>Загрузка статей...</p>
	@endif
</div>

Результат выполнения кода:

<div>
	<ul>
		<li>Article 1</li>
		<li>Article 2</li>
		<li>Article 3</li>
		<li>Article 4</li>
		<li>Article 5</li>
	</ul>
</div>

Пример

Давайте передадим параметр в метод при загрузке элемента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $userId = 1;
		public $userName = '';
		
		public function loadUser($id)
		{
			$users = [
				1 => 'Alice',
				2 => 'Bob',
				3 => 'Charlie',
			];
			
			$this->userName = $users[$id] ?? 'Unknown';
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div wire:load="loadUser({{ $userId }})">
	Привет, {{ $userName }}
</div>

Результат выполнения кода:

<div>
	Привет, Alice
</div>

Особенности использования

Директива wire:load выполняется один раз при первом появлении элемента в DOM. Если элемент скрыт с помощью wire:show или условных конструкций, событие сработает только когда элемент станет видимым. При обновлении компонента через Livewire событие wire:load не вызывается повторно.

Смотрите также

директиву wire:init,
которая выполняет метод при инициализации компонента
директиву wire:click,
которая вызывает метод при клике на элемент
директиву wire:submit,
которая вызывает метод при отправке формы
директиву wire:model,
которая привязывает поле ввода к свойству компонента