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

Директива wire:cloak решает проблему мерцания (FOUC - Flash of Unstyled Content) при первоначальной загрузке страницы с Livewire-компонентами. Она вешается на элемент, который должен быть скрыт до завершения инициализации Livewire. Как только JavaScript-фреймворк полностью загружен и готов к работе, он автоматически убирает атрибут wire:cloak или добавляет CSS-класс, делая элемент видимым. Это позволяет избежать отображения данных в "сыром" виде, например, фигурных скобок {{ $text }} или необработанных Blade-конструкций, до того, как они будут преобразованы в фактические данные.

Для правильной работы директивы, необходимо определить CSS-правило, которое будет скрывать элементы с атрибутом wire:cloak или классом wire-cloak. Обычно это делается в глобальном стиле и выглядит как [wire\:cloak], .wire-cloak { display: none; }. По умолчанию Livewire не добавляет стили автоматически, поэтому эту настройку нужно выполнить вручную.

Синтаксис

Директива записывается как атрибут HTML-элемента без значения:

<div wire:cloak>
	{{ $content }}
</div>

Либо можно использовать альтернативный синтаксис в виде CSS-класса:

<div class="wire-cloak">
	{{ $content }}
</div>

Пример

Давайте создадим компонент, который отображает приветственное сообщение. Без использования wire:cloak при медленном интернете пользователь на мгновение увидит необработанный код {{ $message }}. Исправим это, добавив директиву:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Greeting extends Component
	{
		public $message = 'Hello, Livewire!';
		
		public function render()
		{
			return view('livewire.greeting');
		}
	}
?>

<div wire:cloak>
	<h1>{{ $message }}</h1>
</div>

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

<div>
	<h1>Hello, Livewire!</h1>
</div>

Пример

Покажем использование wire:cloak на более сложном примере со списком элементов. В момент загрузки страницы список может отображаться с задержкой, поэтому скроем его контейнер до полной готовности Livewire:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class ItemList extends Component
	{
		public $items = ['a', 'b', 'c', 'd', 'e'];
		
		public function render()
		{
			return view('livewire.item-list');
		}
	}
?>

<ul wire:cloak>
	@foreach ($items as $item)
		<li>{{ $item }}</li>
	@endforeach
</ul>

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

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>

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

директиву wire:loading,
которая управляет отображением элементов во время выполнения запроса
директиву wire:dirty,
которая отслеживает изменения состояния полей формы
директиву wire:text,
которая обновляет текстовое содержимое элемента при изменении данных
директиву wire:init,
которая выполняет метод сразу после инициализации компонента