コンテンツが変更され、バックエンドのLivewireコンポーネントとまだ同期していないというフィードバックを提供すると便利な状況があります。
wire:modelまたはwire:model.lazyを使用する入力では、Livewireが完全に更新されるまで、フィールドがdirtyであることを表示したいでしょう。
ダーティな要素上のクラスのトグル
wire:dirtyディレクティブを持つ要素は、フロントエンド値と最後に返されたLivewireデータ値の違いを監視しています。
class修飾子を追加することで、ダーティ時に要素へクラスを追加できます。
<div>
<input wire:dirty.class="border-red-500" wire:model.lazy="foo">
</div>これでユーザーが入力値を変更すると、この要素はborder-red-500クラスを受け取ります。入力値が元の状態に戻った場合、またはLivewireコンポーネントが更新された場合、クラスは再び削除されます。
wire:loadingの動作と同様に、逆の振る舞いをを実行するため、.remove修飾子を追加してクラスを削除することもできます。
<div>
<input wire:dirty.class.remove="bg-green-200" class="bg-green-200" wire:model.lazy="foo">
</div>big-green-200クラスはダーティの間、このインプットから削除されます。
要素のトグル
修飾子のないwire:dirtyディレクティブのデフォルト動作では、要素はダーティになるまで非表示になります。これは、入力自体に使用するとパラドックスを生み出す可能性がありますが、ロード状況と同様に、dirtyディレクティブはwire:targetを使う他の要素の外観を切り替えることに使用できます。
<div>
<span wire:dirty wire:target="foo">Updating...</span>
<input wire:model.lazy="foo">
</div>この例でspanはデフォルトで非表示になり、入力要素がダーティの場合にのみ表示されます。
他の要素のクラスのトグル
クラス修飾子と属性修飾子は、参照される要素に対して同じ方法で使用できます。
<div>
<label wire:dirty.class="text-red-500" wire:target="foo">Full Name</label>
<input wire:model.lazy="foo">
</div>これでinputがダーティの場合、ラベルテキストへtext-red-500クラスがついかされます。