Директива `wire:dirty`⚓︎

В традиционной HTML-странице, содержащей форму, форма отправляется только тогда, когда пользователь нажимает кнопку «Отправить».

Однако Livewire способен на гораздо больше, чем традиционные отправки форм. Вы можете валидировать вводы форм в реальном времени или даже сохранять форму по мере того, как пользователь печатает.

В этих сценариях «реального времени» обновлений полезно сигнализировать пользователям, когда форма или часть формы была изменена, но не сохранена в базе данных.

Когда форма содержит несохранённый ввод, эта форма считается «грязной». Она становится «чистой» только тогда, когда был запущен сетевой запрос для синхронизации состояния сервера с состоянием клиента.

Базовое использование⚓︎

Livewire позволяет легко переключать визуальные элементы на странице с помощью директивы wire:dirty.

Добавляя wire:dirty к элементу, вы инструктируете Livewire показывать элемент только тогда, когда состояние клиента расходится с состоянием сервера.

Для демонстрации вот пример формы UpdatePost, содержащей визуальное указание «Несохранённые изменения...», которое сигнализирует пользователю, что форма содержит ввод, который не был сохранён:

<form wire:submit="update">
    <input type="text" wire:model="title">

    <!-- ... -->

    <button type="submit">Обновить</button>

    <div wire:dirty>Несохранённые изменения...</div>
</form>

Поскольку к сообщению «Несохранённые изменения...» добавлен wire:dirty, сообщение скрыто по умолчанию. Livewire автоматически отобразит сообщение, когда пользователь начнёт изменять вводы формы.

Когда пользователь отправляет форму, сообщение исчезнет снова, поскольку данные сервера / клиента снова синхронизированы.

Удаление элементов⚓︎

Добавляя модификатор .remove к wire:dirty, вы можете вместо этого показывать элемент по умолчанию и скрывать его только тогда, когда компонент имеет «грязное» состояние:

    <div wire:dirty.remove>Данные синхронизированы...</div>

Целевое обновление свойств⚓︎

Представьте, что вы используете wire:model.live.blur для обновления свойства на сервере сразу после того, как пользователь покидает поле ввода. В этом сценарии вы можете предоставить «грязное» указание только для этого свойства, добавив wire:target к элементу, содержащему директиву wire:dirty.

Вот пример показа грязного указания только тогда, когда свойство title было изменено:

<form wire:submit="update">
    <input wire:model.live.blur="title">

    <div wire:dirty wire:target="title">Несохранённое название...</div>

    <button type="submit">Обновить</button>
</form>

Переключение классов⚓︎

Часто, вместо переключения целых элементов, вы можете захотеть переключать отдельные CSS-классы на вводе, когда его состояние «грязное».

Ниже пример, где пользователь печатает в поле ввода, и граница становится жёлтой, указывая на «несохранённое» состояние. Затем, когда пользователь уходит с поля, граница удаляется, указывая, что состояние было сохранено на сервере:

<input wire:model.live.blur="title" wire:dirty.class="border-yellow-500">

Использование выражения `$dirty`⚓︎

В дополнение к директиве wire:dirty, вы можете проверять грязное состояние программно с помощью выражения $dirty в директивах Livewire или $wire.$dirty() в Alpine.

Проверка, грязен ли весь компонент⚓︎

Чтобы проверить, имеет ли любое свойство на компоненте несохранённые изменения:

<div wire:show="$dirty">У вас есть несохранённые изменения</div>

Проверка, грязно ли конкретное свойство⚓︎

Чтобы проверить, было ли изменено конкретное свойство:

<div wire:show="$dirty('title')">Название было изменено</div>

Вы также можете проверять вложенные свойства:

<div wire:show="$dirty('user.name')">Имя было изменено</div>

Условная логика на основе грязного состояния⚓︎

Вы можете использовать $wire.$dirty() в Alpine для условного выполнения логики:

<button x-on:click="$wire.$dirty('title') && $wire.save()">
    Сохранить название
</button>

Или применять условные классы с Alpine:

<input
    wire:model="email"
    :class="$wire.$dirty('email') && 'border-yellow-500'"
>

Справочник⚓︎

wire:dirty
wire:target="property"

Модификаторы⚓︎

Модификатор	Описание
`.remove`	Показывать элемент по умолчанию, скрывать при грязном состоянии
`.class="class-name"`	Добавить CSS-класс при грязном состоянии

Выражение `$dirty`⚓︎

Выражение	Описание
`$dirty`	Возвращает `true`, если любое свойство имеет несохранённые изменения
`$dirty('property')`	Возвращает `true`, если указанное свойство имеет несохранённые изменения
`$dirty(['title', 'description'])`	Возвращает `true`, если любое из указанных свойств имеет несохранённые изменения

Может использоваться в директивах Livewire, как wire:show="$dirty", или в Alpine как $wire.$dirty().

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