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

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

Синтаксис

<div wire:dirty.class="highlight">
	Content
</div>

Директива также может принимать имя конкретного свойства в качестве суффикса:

<div wire:dirty.class.property="highlight">
	Content
</div>

Пример

Давайте добавим класс highlight к полю ввода, когда его значение изменено пользователем:

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

<div>
	<input type="text" wire:model="name" wire:dirty.class="highlight">
	<input type="email" wire:model="email" wire:dirty.class="highlight">
	<button wire:click="save">Save</button>
	
	<style>
		.highlight {
			border-color: #ff6b6b;
			background-color: #fff5f5;
		}
	</style>
</div>

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

<div>
	<input type="text" class="highlight" value="Jane Doe">
	<input type="email" value="john@example.com">
	<button>Save</button>
</div>

Пример

Давайте отслеживаем изменение только конкретного свойства $name:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserSettings extends Component
	{
		public $username = 'user123';
		public $email = 'user@example.com';
		public $bio = 'Lorem ipsum dolor sit amet';
		
		public function render()
		{
			return view('livewire.user-settings');
		}
	}
?>

<div>
	<h3>User Settings</h3>
	<div>
		<label>Username:</label>
		<input type="text" wire:model="username" wire:dirty.class.username="modified">
	</div>
	<div>
		<label>Email:</label>
		<input type="email" wire:model="email" wire:dirty.class.email="modified">
	</div>
	<div>
		<label>Bio:</label>
		<textarea wire:model="bio" wire:dirty.class.bio="modified"></textarea>
	</div>
	<button wire:click="save">Save Changes</button>
	
	<style>
		.modified {
			border: 2px solid #f59e0b;
			background-color: #fffbeb;
		}
	</style>
</div>

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

<div>
	<h3>User Settings</h3>
	<div>
		<label>Username:</label>
		<input type="text" class="modified" value="newuser">
	</div>
	<div>
		<label>Email:</label>
		<input type="email" value="user@example.com">
	</div>
	<div>
		<label>Bio:</label>
		<textarea>Lorem ipsum dolor sit amet</textarea>
	</div>
	<button>Save Changes</button>
</div>

Пример

Давайте используем обратное условие с директивами wire:dirty.class.remove для удаления класса, когда данные становятся "чистыми":

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Form extends Component
	{
		public $title = 'Hello World';
		public $content = 'This is a sample content';
		
		public function render()
		{
			return view('livewire.form');
		}
	}
?>

<div>
	<input type="text" wire:model="title" wire:dirty.class="dirty" wire:dirty.class.remove="clean">
	<textarea wire:model="content" wire:dirty.class="dirty" wire:dirty.class.remove="clean"></textarea>
	<button wire:click="save">Save</button>
	
	<style>
		.dirty {
			border-color: #ef4444;
			background-color: #fef2f2;
		}
		.clean {
			border-color: #22c55e;
			background-color: #f0fdf4;
		}
	</style>
</div>

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

<div>
	<input type="text" class="dirty" value="Updated Title">
	<textarea class="clean">This is a sample content</textarea>
	<button>Save</button>
</div>

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

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