wire:dirty

在包含表单的传统 HTML 页面中，只有当用户按下“提交”按钮时才会提交表单。

但是，Livewire 的功能远超传统的表单提交。你可以实时验证表单输入，甚至在用户键入时保存表单。

在这些“实时”更新场景中，当表单或表单的子集已更改但尚未保存到数据库时，向用户发出信号可能会有所帮助。

当表单包含未保存的输入时，该表单被视为“脏”。只有当触发网络请求以将服务器状态与客户端状态同步时，它才变为“干净”。

#基本用法

Livewire 允许你使用 wire:dirty 指令轻松切换页面上的可视元素。

通过将 wire:dirty 添加到元素，你指示 Livewire 仅在客户端状态与服务器端状态不同时显示元素。

为了演示，这里有一个 UpdatePost 表单的示例，其中包含一个可视的“未保存的更改...”指示，向用户发出信号，表明表单包含尚未保存的输入

<form wire:submit="update">
    <input type="text" wire:model="title">
 
    <!-- ... -->
 
    <button type="submit">Update</button>
 
    <div wire:dirty>Unsaved changes...</div> 
</form>

由于已将 wire:dirty 添加到“未保存的更改...”消息，因此该消息将默认隐藏。当用户开始修改表单输入时，Livewire 将自动显示该消息。

当用户提交表单时，消息将再次消失，因为服务器/客户端数据已重新同步。

#删除元素

通过将 .remove 修饰符添加到 wire:dirty，您可以默认显示元素，仅在组件具有“dirty”状态时隐藏它

<div wire:dirty.remove>The data is in-sync...</div>

#定位属性更新

假设您使用 wire:model.blur 在用户离开输入字段后立即更新服务器上的属性。在这种情况下，您可以通过将 wire:target 添加到包含 wire:dirty 指令的元素来仅针对该属性提供“dirty”指示。

以下是一个仅在 title 属性已更改时显示 dirty 指示的示例

<form wire:submit="update">
    <input wire:model.blur="title">
 
    <div wire:dirty wire:target="title">Unsaved title...</div> 
 
    <button type="submit">Update</button>
</form>

#切换类

通常，您可能希望在输入的状态为“dirty”时切换输入上的单个 CSS 类，而不是切换整个元素。

以下是一个示例，其中用户键入输入字段，边框变为黄色，表示“未保存”状态。然后，当用户从该字段切换选项卡时，将删除边框，表示状态已保存在服务器上

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