$wire.watch()

Метод $wire.watch доступен в JavaScript-контексте компонента Livewire. Он позволяет подписаться на изменения конкретного свойства компонента. При изменении значения этого свойства на сервере и последующем обновлении DOM, переданная функция-колбэк будет выполнена на клиенте. Метод принимает два параметра: имя свойства в виде строки и функцию-обработчик, которая получает новое и старое значение свойства.

Синтаксис

$wire.watch('property', (newValue, oldValue) => {
	// Действия при изменении свойства
});

Пример

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

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

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

@push('scripts')
	<script>
		document.addEventListener('livewire:init', () => {
			$wire.watch('num', (newValue, oldValue) => {
				console.log('Number changed from ' + oldValue + ' to ' + newValue);
			});
		});
	</script>
@endpush

Результат в консоли после трех кликов:

"Number changed from 0 to 1"
"Number changed from 1 to 2"
"Number changed from 2 to 3"

Пример

Отследим изменение свойства-массива $arr. При добавлении нового элемента будем выводить его в консоль:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ListComponent extends Component
	{
		public $arr = [];
		
		public function add()
		{
			$this->arr[] = count($this->arr) + 1;
		}
		
		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<div>
	<button wire:click="add">Add</button>
	<ul>
		@foreach ($arr as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

@push('scripts')
	<script>
		document.addEventListener('livewire:init', () => {
			$wire.watch('arr', (newValue, oldValue) => {
				const lastItem = newValue[newValue.length - 1];
				console.log('Added element: ' + lastItem);
			});
		});
	</script>
@endpush

Результат в консоли после добавления трех элементов:

"Added element: 1"
"Added element: 2"
"Added element: 3"

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

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