$wire.$refresh()

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

Синтаксис

$wire.$refresh()

Пример

Давайте обновим компонент по клику на кнопку, используя нативный JavaScript:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

		public function increment()
		{
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button onclick="$wire.increment();">
		Increment
	</button>
	<button onclick="$wire.$refresh();">
		Refresh
	</button>
	<span>{{ $num }}</span>
</div>

Первая кнопка вызывает метод increment и автоматически обновляет компонент. Вторая кнопка вызывает $wire.$refresh, который просто обновляет состояние компонента.

Пример

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

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Settings extends Component
	{
		public $theme;

		public function mount()
		{
			$this->theme = 'light';
		}

		public function render()
		{
			return view('livewire.settings');
		}
	}
?>

<div>
	<button onclick="
		localStorage.setItem('theme', 'dark');
		$wire.$refresh();
	">
		Set Dark Theme
	</button>
	<button onclick="
		localStorage.setItem('theme', 'light');
		$wire.$refresh();
	">
		Set Light Theme
	</button>
	<span>Current theme: {{ $theme }}</span>
</div>

В этом примере метод $wire.$refresh используется для обновления компонента после сохранения данных в localStorage. При этом компонент получит актуальное состояние из хранилища (если бы данные загружались в методе mount).

Пример

Давайте обновим компонент после AJAX-запроса с помощью библиотеки axios:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class UserData extends Component
	{
		public $userData = [];

		public function refreshUserData()
		{
			// Simulate fetching fresh data
			$this->userData = [
				'name' => 'John Doe',
				'email' => 'john@example.com'
			];
		}

		public function render()
		{
			return view('livewire.user-data');
		}
	}
?>

<div>
	<button onclick="
		axios.get('/api/user')
			.then(function(response) {
				$wire.refreshUserData();
				$wire.$refresh();
			});
	">
		Load User Data
	</button>
	@if (!empty($userData))
		<p>{{ $userData['name'] }}</p>
		<p>{{ $userData['email'] }}</p>
	@endif
</div>

Здесь компонент обновляется с помощью $wire.$refresh после успешного выполнения AJAX-запроса и обновления данных в методе компонента.

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

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