Событие $commit

Событие $commit в JavaScript API Livewire используется для принудительной отправки текущего состояния компонента на сервер. Оно полезно, когда нужно синхронизировать данные с сервером вручную, например, после изменения свойства через $wire.set или перед выполнением других действий. Это событие не принимает аргументов и возвращает Promise.

Синтаксис

$wire.$commit();

Метод вызывается на экземпляре компонента $wire и не требует передачи параметров.

Пример

Давайте создадим компонент с числом $num и кнопкой, которая изменяет его через JavaScript, а затем вручную фиксирует изменения с помощью $commit:

<?php
	namespace AppLivewire;

	use Livewire\Component;

	class Counter extends Component
	{
		public $num = 0;

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

<div>
	<span>{{ $num }}</span>
	<button id="change-btn">Изменить через JS</button>
</div>

@push('scripts')
	<script>
		document.getElementById('change-btn').addEventListener('click', function() {
			$wire.set('num', 10);
			$wire.$commit();
		});
	</script>
@endpush

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

<span>10</span>
<button>Изменить через JS</button>

Пример

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

<?php
	namespace AppLivewire;

	use Livewire\Component;

	class UserProfile extends Component
	{
		public $name = 'user';
		public $age = 25;

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

<div>
	<span>{{ $name }} - {{ $age }}</span>
	<button id="update-btn">Обновить профиль</button>
</div>

@push('scripts')
	<script>
		document.getElementById('update-btn').addEventListener('click', function() {
			$wire.set('name', 'article');
			$wire.set('age', 30);
			$wire.$commit();
		});
	</script>
@endpush

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

<span>article - 30</span>
<button>Обновить профиль</button>

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

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