Директива @script

Директива @script используется в Blade-шаблонах Livewire для встраивания JavaScript-кода. Она позволяет выполнять произвольные скрипты, которые будут инициализироваться после загрузки компонента. В отличие от обычного тега <script>, директива @script автоматически обрабатывает жизненный цикл компонента и может взаимодействовать с его данными и методами.

Синтаксис

@script
	// JavaScript code
@endscript

Пример

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

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

<div>
	<button wire:click="$set('num', $num + 1)">
		+
	</button>
	<span>{{ $num }}</span>
</div>

@script
	console.log('Component loaded');
@endscript

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

"Component loaded"

Пример

Давайте используем JavaScript для изменения свойства компонента с помощью $wire:

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

<div>
	<button id="incBtn">
		+
	</button>
	<span>{{ $num }}</span>
</div>

@script
	document.getElementById('incBtn')
		.addEventListener('click', () => {
			$wire.inc();
		});
@endscript

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

<button>
	+
</button>
<span>1</span>

Пример

Давайте передадим данные из PHP в JavaScript с помощью атрибута data:

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

<div data-text="{{ $text }}">
	<span>{{ $num }}</span>
</div>

@script
	const elem = document.querySelector('div');
	console.log(elem.dataset.text);
@endscript

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

"Hello"

Пример

Давайте выполним скрипт только при первом рендере с помощью условия $wire.__instance:

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

<div>
	<button wire:click="inc">
		+
	</button>
	<span>{{ $num }}</span>
</div>

@script
	if (!window._initialized) {
		window._initialized = true;
		console.log('First render');
	}
@endscript

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

"First render"

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

директиву @this,
которая предоставляет доступ к JavaScript-объекту компонента
директиву @livewire,
которая подключает Livewire на страницу
директиву @entangle,
которая связывает данные Livewire с Alpine.js
директиву @livewireScripts,
которая подключает JavaScript-скрипты Livewire