$wire.$commit()

Метод $wire.$commit используется в JavaScript для принудительной отправки всех изменений состояния компонента Livewire на сервер. Обычно Livewire автоматически отправляет изменения после завершения очереди задач, но с помощью этого метода можно инициировать отправку вручную в нужный момент.

Синтаксис

$wire.$commit()

Метод не принимает параметров и возвращает Promise.

Пример

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

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

<div>
	<span>Count: {{ $num }}</span>
	<button x-data @click="
		$wire.num = 5;
		$wire.$commit();
	">
		Set to 5
	</button>
</div>

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

<div>
	<span>Count: 5</span>
	<button>
		Set to 5
	</button>
</div>

Пример

Давайте выполним несколько изменений подряд и отправим их одним вызовом:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		public $text = 'abcde';
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<span>Number: {{ $num }}</span>
	<span>Text: {{ $text }}</span>
	<button x-data @click="
		$wire.num = 10;
		$wire.text = 'article';
		$wire.$commit();
	">
		Update both
	</button>
</div>

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

<div>
	<span>Number: 10</span>
	<span>Text: article</span>
	<button>
		Update both
	</button>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserComponent extends Component
	{
		public $name = 'John';
		
		public function render()
		{
			return view('livewire.user-component');
		}
	}
?>

<div>
	<span>Hello, {{ $name }}</span>
	<button x-data @click="
		async function updateUser() {
			$wire.name = 'Jane';
			await $wire.$commit();
			console.log('User updated successfully');
		}
		updateUser();
	">
		Change name
	</button>
</div>

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

"User updated successfully"

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

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