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

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

Синтаксис

<div wire:init="methodName">
	{{ $property }}
</div>

Пример

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

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

		public function initCounter()
		{
			$this->num = 10;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div wire:init="initCounter">
	<span>{{ $num }}</span>
</div>

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

<div>
	<span>10</span>
</div>

Пример

Давайте загрузим список пользователей при инициализации компонента:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class UserList extends Component
	{
		public $users = [];

		public function loadUsers()
		{
			$this->users = ['user1', 'user2', 'user3'];
		}

		public function render()
		{
			return view('livewire.user-list');
		}
	}
?>

<div wire:init="loadUsers">
	<ul>
		@foreach ($users as $user)
			<li>{{ $user }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<ul>
		<li>user1</li>
		<li>user2</li>
		<li>user3</li>
	</ul>
</div>

Пример

Давайте выполним несколько действий в методе инициализации:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Dashboard extends Component
	{
		public $count = 0;
		public $status = '';

		public function setupDashboard()
		{
			$this->count = 100;
			$this->status = 'active';
		}

		public function render()
		{
			return view('livewire.dashboard');
		}
	}
?>

<div wire:init="setupDashboard">
	<p>Count: {{ $count }}</p>
	<p>Status: {{ $status }}</p>
</div>

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

<div>
	<p>Count: 100</p>
	<p>Status: active</p>
</div>

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

директиву wire:load,
которая выполняет метод при загрузке страницы
директиву wire:poll,
которая периодически опрашивает сервер
директиву wire:model,
которая привязывает поле ввода к свойству компонента
директиву wire:click,
которая вызывает метод при клике на элемент