Livewire 中文文档

主题

全部文档

wire:dirty ​

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

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

在这些「实时」更新场景中，当表单或其一部分已更改但尚未保存到数据库时，向用户给出提示会很有帮助。

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

基本用法 ​

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

给元素加上 wire:dirty，即指示 Livewire：仅在客户端状态与服务器端状态不一致时才显示该元素。

下面示例是一个 UpdatePost 表单，其中有「Unsaved changes...」的视觉提示，告知用户表单中有尚未保存的输入：

blade
<form wire:submit="update">
    <input type="text" wire:model="title">

    <!-- ... -->

    <button type="submit">Update</button>

    <div wire:dirty>Unsaved changes...</div> <!-- [tl! highlight] -->
</form>

因为「Unsaved changes...」消息加了 wire:dirty，该消息默认会隐藏。用户开始修改表单输入时，Livewire 会自动显示该消息。

用户提交表单后，由于服务器与客户端数据再次同步，消息会再次消失。

移除元素 ​

给 wire:dirty 加上 .remove 修饰符后，可以改为默认显示元素，仅在组件处于「dirty」状态时隐藏：

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

针对属性更新 ​

假设你用 wire:model.live.blur，在用户离开输入字段后立即在服务器上更新属性。此时，可在带有 wire:dirty 的元素上添加 wire:target，仅为该属性提供「dirty」提示。

下面示例仅在 title 属性被更改时显示 dirty 提示：

blade
<form wire:submit="update">
    <input wire:model.live.blur="title">

    <div wire:dirty wire:target="title">Unsaved title...</div> <!-- [tl! highlight] -->

    <button type="submit">Update</button>
</form>

切换类名 ​

很多时候，你可能不想切换整个元素，而是希望在输入处于「dirty」状态时切换其上的个别 CSS 类。

下面示例中，用户在输入字段中打字时边框变为黄色，表示「未保存」状态；当用户 Tab 离开该字段后，边框移除，表示状态已在服务器上保存：

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

使用 $dirty 表达式 ​

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

检查整个组件是否 dirty ​

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

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

检查特定属性是否 dirty ​

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

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

也可以检查嵌套属性：

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

基于 dirty 状态的条件逻辑 ​

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

blade
<button x-on:click="$wire.$dirty('title') && $wire.save()">
    Save Title
</button>

或用 Alpine 应用条件类名：

blade
<input
    wire:model="email"
    :class="$wire.$dirty('email') && 'border-yellow-500'"
>

参考 ​

blade
wire:dirty
wire:target="property"

修饰符 ​

修饰符说明
.remove默认显示元素，dirty 时隐藏
.class="class-name"dirty 时添加 CSS 类

$dirty 表达式 ​

表达式说明
$dirty任一属性有未保存更改时返回 true
$dirty('property')指定属性有未保存更改时返回 true
$dirty(['title', 'description'])所列属性中任一有未保存更改时返回 true

可用于 Livewire 指令（如 wire:show="$dirty"），或在 Alpine 中以 $wire.$dirty() 使用。