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> <!-- [tl! highlight] -->
</form>

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

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

删除元素

通过将 .remove 修饰符添加到 wire:dirty，你可以默认显示元素，并且仅在组件具有"脏"状态时隐藏它：

<div wire:dirty.remove>数据已同步...</div>

针对属性更新

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

以下是仅在标题属性已更改时显示脏指示的示例：

<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>

切换类

通常，你可能希望在输入状态为"脏"时切换单个 CSS 类，而不是切换整个元素。

以下是一个示例，其中用户在输入字段中键入，边框变为黄色，表示"未保存"状态。然后，当用户从字段切换离开时，边框被移除，表示状态已保存在服务器上：

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