Объект $js

Объект $js доступен в любом методе Livewire-компонента и предоставляет интерфейс для выполнения JavaScript-операций на стороне клиента. С помощью $js можно обновлять свойства, вызывать методы, отправлять события и выполнять другие действия без написания отдельного JavaScript-кода.

Синтаксис

<?php
	$this->js->methodName($param1, $param2);
?>

Метод set - установка свойства

Метод set устанавливает значение свойства компонента на клиентской стороне:

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

<div>
	<span>{{ $num }}</span>
	<button wire:click="resetNum">Reset</button>
</div>

Метод call - вызов метода

Метод call вызывает указанный метод компонента на клиентской стороне:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function updateNum($value)
		{
			$this->num = $value;
		}
		
		public function doubleNum()
		{
			$this->js->call('updateNum', $this->num * 2);
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<span>{{ $num }}</span>
	<button wire:click="doubleNum">Double</button>
</div>

Метод dispatch - отправка события

Метод dispatch отправляет событие на клиентскую сторону:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Notifier extends Component
	{
		public function notify($message)
		{
			$this->js->dispatch('show-notification', message: $message);
		}
		
		public function render()
		{
			return view('livewire.notifier');
		}
	}
?>

<div>
	<button wire:click="notify('Hello World')">
		Notify
	</button>
</div>

@script
	<script>
		document.addEventListener('show-notification', (event) => {
			alert(event.detail.message);
		});
	</script>
@endscript

Метод refresh - обновление компонента

Метод refresh принудительно обновляет компонент на клиентской стороне:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Updater extends Component
	{
		public $time;
		
		public function updateTime()
		{
			$this->time = now()->format('H:i:s');
			$this->js->refresh();
		}
		
		public function render()
		{
			return view('livewire.updater');
		}
	}
?>

<div>
	<span>{{ $time }}</span>
	<button wire:click="updateTime">Refresh</button>
</div>

Метод toggle - переключение состояния

Метод toggle переключает булевое свойство компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Toggler extends Component
	{
		public $isOpen = false;
		
		public function toggleOpen()
		{
			$this->js->toggle('isOpen');
		}
		
		public function render()
		{
			return view('livewire.toggler');
		}
	}
?>

<div>
	<button wire:click="toggleOpen">
		@if($isOpen)
			Close
		@else
			Open
		@endif
	</button>
</div>

Метод parent - доступ к родительскому компоненту

Метод parent позволяет получить доступ к родительскому компоненту для выполнения JavaScript-действий:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Child extends Component
	{
		public function updateParent()
		{
			$this->js->parent()->set('value', 100);
		}
		
		public function render()
		{
			return view('livewire.child');
		}
	}
?>

<div>
	<button wire:click="updateParent">
		Update Parent
	</button>
</div>

Метод el - доступ к DOM-элементу

Метод el позволяет получить доступ к DOM-элементу компонента для выполнения JavaScript-операций:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Focuser extends Component
	{
		public $inputValue = '';
		
		public function focusInput()
		{
			$this->js->el()->querySelector('input')->focus();
		}
		
		public function render()
		{
			return view('livewire.focuser');
		}
	}
?>

<div>
	<input type="text" wire:model="inputValue" />
	<button wire:click="focusInput">Focus</button>
</div>

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

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