wire:dirty
従来の HTML ページでは、フォームはユーザーが「送信」ボタンを押したときにのみ送信されます。In a traditional HTML page containing a form, the form is only ever submitted when the user presses the "Submit" button.
しかし、Livewire は従来のフォーム送信よりもはるかに多くのことができます。フォーム入力をリアルタイムで検証したり、ユーザーが入力するにつれてフォームを保存したりすることも可能です。However, Livewire is capable of much more than traditional form submissions. You can validate form inputs in real-time or even save the form as a user types.
これらの「リアルタイム」更新シナリオでは、フォームまたはフォームのサブセットが変更されたが、データベースに保存されていない場合に、ユーザーに知らせるのが役立つ場合があります。In these "real-time" update scenarios, it can be helpful to signal to your users when a form or subset of a form has been changed, but hasn't been saved to the database.
フォームに未保存の入力が含まれている場合、そのフォームは「ダーティ」と見なされます。ネットワークリクエストがトリガーされ、サーバの状態とクライアント側の状態が同期されたときにのみ、「クリーン」になります。When a form contains un-saved input, that form is considered "dirty". It only becomes "clean" when a network request has been triggered to synchronize the server state with the client-side state.
基本的な使い方Basic usage
Livewire を使用すると、wire:dirty ディレクティブを使用して、ページ上の視覚要素を簡単に切り替えることができます。Livewire allows you to easily toggle visual elements on the page using the wire:dirty directive.
wire:dirty を要素に追加すると、クライアント側の状態がサーバ側の状態と異なる場合にのみ要素を表示するように Livewire に指示することになります。By adding wire:dirty to an element, you are instructing Livewire to only show the element when the client-side state diverges from the server-side state.
デモンストレーションとして、フォームに保存されていない入力が含まれていることをユーザーに示す視覚的な「未保存の変更...」という表示を含む UpdatePost フォームの例を次に示します。To demonstrate, here is an example of an UpdatePost form containing a visual "Unsaved changes..." indication that signals to the user that the form contains input that has not been saved:
<form wire:submit="update">
<input type="text" wire:model="title">
<!-- ... -->
<button type="submit">Update</button>
<div wire:dirty>Unsaved changes...</div> <!-- [tl! highlight] -->
</form>
wire:dirty が「未保存の変更...」メッセージに追加されているため、メッセージはデフォルトで非表示になります。 ユーザーがフォーム入力を変更し始めると、Livewire は自動的にメッセージを表示します。Because wire:dirty has been added to the "Unsaved changes..." message, the message will be hidden by default. Livewire will automatically display the message when the user starts modifying the form inputs.
ユーザーがフォームを送信すると、サーバ/クライアントデータが再び同期されるため、メッセージは再び消えます。When the user submits the form, the message will disappear again, since the server / client data is back in sync.
要素の削除Removing elements
.remove 修飾子を wire:dirty に追加することにより、要素をデフォルトで表示し、コンポーネントが「ダーティ」状態の場合にのみ非表示にすることができます。By adding the .remove modifier to wire:dirty, you can instead show an element by default and only hide it when the component has "dirty" state:
<div wire:dirty.remove>The data is in-sync...</div>
プロパティの更新のターゲット設定Targeting property updates
wire:model.blur を使用して、ユーザーが入力フィールドから離れた直後にサーバ上のプロパティを更新するとします。 このシナリオでは、wire:dirty ディレクティブを含む要素に wire:target を追加することで、そのプロパティのみの「ダーティ」表示を提供できます。Imagine you are using wire:model.blur to update a property on the server immediately after a user leaves an input field. In this scenario, you can provide a "dirty" indication for only that property by adding wire:target to the element that contains the wire:dirty directive.
タイトルプロパティが変更された場合にのみダーティ表示を表示する例を次に示します。Here is an example of only showing a dirty indication when the title property has been changed:
<form wire:submit="update">
<input wire:model.blur="title">
<div wire:dirty wire:target="title">Unsaved title...</div> <!-- [tl! highlight] -->
<button type="submit">Update</button>
</form>
クラスの切り替えToggling classes
多くの場合、要素全体を切り替える代わりに、状態が「ダーティ」の場合に、入力の個々の CSS クラスを切り替えることができます。Often, instead of toggling entire elements, you may want to toggle individual CSS classes on an input when its state is "dirty".
以下は、ユーザーが入力フィールドに入力すると境界線が黄色になり、「未保存」状態を示す例です。 次に、ユーザーがフィールドからタブで離れると、境界線が削除され、状態がサーバに保存されたことを示します。Below is an example where a user types into an input field and the border becomes yellow, indicating an "unsaved" state. Then, when the user tabs away from the field, the border is removed, indicating that the state has been saved on the server:
<input wire:model.blur="title" wire:dirty.class="border-yellow-500">