Событие $refresh

Событие $refresh в Livewire используется для программного обновления компонента из JavaScript-кода. При вызове этого события Livewire повторно запрашивает у сервера свежее состояние компонента и обновляет DOM-дерево. Это полезно, когда необходимо обновить интерфейс после выполнения асинхронных операций или внешних событий, которые не были инициированы действиями пользователя в самом компоненте.

Событие $refresh не принимает никаких параметров и просто инициирует полное обновление компонента.

Синтаксис

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

$wire.$refresh();

Для доступа к компоненту используется глобальная переменная $wire, которая доступна в JavaScript-коде на странице с компонентом Livewire.

Пример

Давайте создадим компонент с таймером, который автоматически обновляет время каждую секунду с использованием $refresh:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Timer extends Component
	{
		public $time;
		
		public function mount()
		{
			$this->time = date('H:i:s');
		}
		
		public function updateTime()
		{
			$this->time = date('H:i:s');
		}
		
		public function render()
		{
			return view('livewire.timer');
		}
	}
?>

<div>
	<div>
		Текущее время: <span id="timeDisplay">{{ $time }}</span>
	</div>
	<script>
		setInterval(() => {
			$wire.$refresh();
		}, 1000);
	</script>
</div>

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

<div>
	Текущее время: <span>14:25:30</span>
</div>

Пример

Давайте используем $refresh для обновления компонента после загрузки данных с сервера через AJAX:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class DataLoader extends Component
	{
		public $data = [];
		public $loading = false;
		
		public function loadData()
		{
			$this->loading = true;
			
			// Simulate data loading
			$this->data = ['item1', 'item2', 'item3', 'item4', 'item5'];
			$this->loading = false;
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">Загрузить данные</button>
	@if ($loading)
		<div>Загрузка...</div>
	@else
		<ul>
			@foreach ($data as $item)
				<li>{{ $item }}</li>
			@endforeach
		</ul>
	@endif
	<button id="refreshBtn">Обновить из JavaScript</button>
	<script>
		document.getElementById('refreshBtn').addEventListener('click', function() {
			$wire.$refresh();
		});
	</script>
</div>

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

<div>
	<button>Загрузить данные</button>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
	<button>Обновить из JavaScript</button>
</div>

Пример

Давайте используем $refresh для обновления компонента после выполнения асинхронных операций с использованием setTimeout:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class AsyncUpdater extends Component
	{
		public $status = 'Ожидание';
		public $progress = 0;
		
		public function startProcess()
		{
			$this->status = 'Запущен';
			$this->progress = 0;
		}
		
		public function updateProgress($value)
		{
			$this->progress = $value;
			
			if ($value >= 100) {
				$this->status = 'Завершен';
			}
		}
		
		public function render()
		{
			return view('livewire.async-updater');
		}
	}
?>

<div>
	<div>
		Статус: {{ $status }}
	</div>
	<div>
		Прогресс: {{ $progress }}%
	</div>
	<button wire:click="startProcess">Запустить процесс</button>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			let progress = 0;
			
			window.startAsyncUpdate = function() {
				if (progress >= 100) return;
				
				progress += 10;
				$wire.updateProgress(progress);
				$wire.$refresh();
				
				if (progress < 100) {
					setTimeout(window.startAsyncUpdate, 500);
				}
			};
			
			document.querySelector('[wire\\:click="startProcess"]')
				.addEventListener('click', function() {
					progress = 0;
					setTimeout(window.startAsyncUpdate, 500);
				});
		});
	</script>
</div>

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

<div>
	<div>
		Статус: Завершен
	</div>
	<div>
		Прогресс: 100%
	</div>
	<button>Запустить процесс</button>
</div>

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

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