Действие $js

Действие $js в Livewire предоставляет возможность выполнять произвольный JavaScript-код непосредственно внутри компонента. Это действие чаще всего используется для вызова клиентских функций, манипуляций с DOM, выполнения анимаций или интеграции со сторонними JavaScript-библиотеками. В отличие от директив, $js вызывается из метода компонента на серверной стороне и выполняется на клиенте после обновления.

Синтаксис

В методе компонента вызывается $this->js с передачей JavaScript-кода в виде строки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Example extends Component
	{
		public function someMethod()
		{
			$this->js("alert('Hello from Livewire!')");
		}
		
		public function render()
		{
			return view('livewire.example');
		}
	}
?>

Пример

Давайте создадим компонент, который при клике на кнопку выводит уведомление через JavaScript:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Notification extends Component
	{
		public function showMessage()
		{
			$this->js("alert('Кнопка нажата!')");
		}
		
		public function render()
		{
			return view('livewire.notification');
		}
	}
?>

<div>
	<button wire:click="showMessage">
		Показать уведомление
	</button>
</div>

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

<div>
	<button>
		Показать уведомление
	</button>
</div>
"alert('Кнопка нажата!')"

Пример

Выполним более сложный JavaScript-код, который меняет цвет фона элемента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ColorChanger extends Component
	{
		public $color = '#ffffff';
		
		public function changeColor()
		{
			$colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
			$randomColor = $colors[array_rand($colors)];
			
			$this->color = $randomColor;
			
			$this->js("
				document.getElementById('color-box').style.backgroundColor = '$randomColor';
			");
		}
		
		public function render()
		{
			return view('livewire.color-changer');
		}
	}
?>

<div>
	<div id="color-box" style="width: 200px; height: 200px; background-color: {{ $color }}; border: 1px solid #ccc;">
	</div>
	<button wire:click="changeColor">
		Сменить цвет
	</button>
</div>

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

<div>
	<div id="color-box" style="width: 200px; height: 200px; background-color: #ff0000; border: 1px solid #ccc;">
	</div>
	<button>
		Сменить цвет
	</button>
</div>

Пример

Выполним JavaScript-код с передачей данных из компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserGreeting extends Component
	{
		public $name = 'Гость';
		
		public function greet($name)
		{
			$this->name = $name;
			
			$this->js("
				alert('Привет, ' + '$name' + '!');
			");
		}
		
		public function render()
		{
			return view('livewire.user-greeting');
		}
	}
?>

<div>
	<p>Имя: {{ $name }}</p>
	<button wire:click="greet('Алексей')">
		Поприветствовать
	</button>
</div>

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

<div>
	<p>Имя: Алексей</p>
	<button>
		Поприветствовать
	</button>
</div>
"alert('Привет, Алексей!')"

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

действие $wire,
которое предоставляет доступ к компоненту из JavaScript
метод $wire.call,
который вызывает методы компонента из JavaScript
метод $wire.set,
который обновляет свойства компонента из JavaScript
метод $wire.refresh,
который выполняет обновление компонента из JavaScript