wire:dirty

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

然而，Livewire 的能力远不止传统的表单提交。你可以实时验证表单输入，甚至在用户输入时保存表单。

在这些"实时"更新场景中，向用户发出信号表明表单或表单的子集已更改但尚未保存到数据库中是很有帮助的。

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

基本用法

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

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

为了演示，这是一个包含视觉"Unsaved changes..."指示的 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 已添加到"Unsaved changes..."消息，该消息将默认隐藏。当用户开始修改表单输入时，Livewire 将自动显示该消息。

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

移除元素

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

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

定向属性更新

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

这是一个仅在 title 属性被更改时显示脏指示的示例：

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

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

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

使用 $dirty 表达式

除了 wire:dirty 指令外，你还可以在 Livewire 指令中使用 $dirty 表达式或在 Alpine 中使用 $wire.$dirty() 以编程方式检查脏状态。

检查整个组件是否为脏

要检查组件上的任何属性是否有未保存的更改：

<div wire:show="$dirty">You have unsaved changes</div>

检查特定属性是否为脏

要检查特定属性是否已被修改：

<div wire:show="$dirty('title')">Title has been modified</div>

你还可以检查嵌套属性：

<div wire:show="$dirty('user.name')">Name has been modified</div>

基于脏状态的条件逻辑

你可以在 Alpine 中使用 $wire.$dirty() 来有条件地运行逻辑：

<button x-on:click="$wire.$dirty('title') && $wire.save()">
    Save Title
</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() 使用。