Директива wire:dirty

Директива wire:dirty вешается на HTML-элемент и добавляет указанный CSS-класс, если значение связанного свойства компонента отличается от первоначального. В значение передаётся имя свойства компонента. Если свойство было изменено, элемент получает класс dirty.

Синтаксис

<div wire:dirty>
	Содержимое
</div>

Пример

Давайте добавим класс dirty к элементу, если свойство $text было изменено:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Editor extends Component
	{
		public $text = 'initial text';
		
		public function render()
		{
			return view('livewire.editor');
		}
	}
?>

<div wire:dirty>
	<input type="text" wire:model="text">
	<span>Текст изменен</span>
</div>

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

<div class="dirty">
	<input type="text">
	<span>Текст изменен</span>
</div>

Пример

Давайте укажем конкретное свойство для отслеживания и зададим свой класс через модификатор class:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Form extends Component
	{
		public $name = 'John';
		public $age = 25;
		
		public function render()
		{
			return view('livewire.form');
		}
	}
?>

<div wire:dirty.class="changed">
	<input type="text" wire:model="name">
	<input type="number" wire:model="age">
	<span>Данные изменены</span>
</div>

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

<div class="changed">
	<input type="text">
	<input type="number">
	<span>Данные изменены</span>
</div>

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

директиву wire:dirty.class,
которая задает собственный класс при изменении свойства
директиву wire:model,
которая связывает поле ввода со свойством компонента
директиву wire:loading,
которая показывает элементы во время загрузки
директиву wire:offline,
которая срабатывает при потере интернет-соединения