JS $dirty

Свойство $dirty доступно в JavaScript-контексте компонента Livewire. Оно возвращает объект, ключами которого являются имена свойств компонента, а значениями - булевы флаги, указывающие, было ли изменено соответствующее свойство с момента последней загрузки страницы. Это полезно для отслеживания изменений в полях ввода, формах и других элементах интерфейса без необходимости отправлять запросы на сервер.

Синтаксис

const dirtyState = $wire.$dirty;
// dirtyState = { propertyName: true/false, ... }

Обращение к свойству происходит через объект $wire внутри компонента Livewire. Объект $dirty содержит все свойства компонента с булевыми значениями.

Пример

Давайте создадим форму с полем ввода и будем отслеживать изменение свойства $text с помощью $dirty:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class FormComponent extends Component
	{
		public $text = 'abcde';
		
		public function render()
		{
			return view('livewire.form-component');
		}
	}
?>

<div>
	<input type="text" wire:model="text" id="inputField">
	<button wire:click="$refresh">Check dirty</button>
</div>

document.addEventListener('livewire:load', function () {
	const input = document.getElementById('inputField');
	const button = document.querySelector('button');
	
	button.addEventListener('click', function () {
		const dirty = window.Livewire.find('form-component').$dirty;
		alert('Property "text" is dirty: ' + dirty.text);
	});
});

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

<div>
	<input type="text" value="new value">
	<button>Check dirty</button>
</div>

После изменения значения в поле и нажатия кнопки, свойство $dirty.text вернет true.

Пример

Теперь рассмотрим пример с несколькими свойствами. Проверим, какое из свойств было изменено:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name = 'user';
		public $email = 'user@example.com';
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div>
	<input type="text" wire:model="name" id="nameField">
	<input type="email" wire:model="email" id="emailField">
	<button wire:click="$refresh">Show dirty fields</button>
</div>

document.addEventListener('livewire:load', function () {
	const button = document.querySelector('button');
	
	button.addEventListener('click', function () {
		const dirty = window.Livewire.find('user-profile').$dirty;
		let message = 'Dirty fields:\n';
		for (const [key, value] of Object.entries(dirty)) {
			if (value === true) {
				message += key + '\n';
			}
		}
		alert(message);
	});
});

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

<div>
	<input type="text" value="newuser">
	<input type="email" value="user@example.com">
	<button>Show dirty fields</button>
</div>

В результате будет выведено сообщение с именем измененного свойства.

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

метод $wire.set,
который устанавливает значение свойства компонента из JavaScript
метод $wire.call,
который вызывает метод компонента из JavaScript
свойство $this,
которое предоставляет доступ к свойствам и методам компонента из JavaScript
директиву wire:model,
которая обеспечивает двустороннюю привязку данных между полем ввода и свойством компонента