Dirty States

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

Dirty States

在某些情况下,提供内容已更改且尚未与后端Livewire组件同步的反馈可能会很有用。

对于使用 wire:model 或 wire:model.lazy 的输入,您可能希望显示字段为 “dirty”,直到Livewire已完全更新。

在“dirty”元素上切换类

带有 wire:dirty 指令的元素将监视前端值和最后返回的 Livewire 数据值之间的差异。

添加 class 修饰符可让您在元素变脏时将其添加到元素中。

<div>
    <input wire:dirty.class="border-red-500" wire:model.lazy="foo">
</div>

现在,当用户修改输入值时,该元素将添加 border-red-500 类。 如果输入值返回到其原始状态,或者 Livewire 组件更新,则该类将再次删除。

您还可以执行相反的操作,并通过添加 .remove 修饰符来删除类,类似于 wire:loading 的工作方式。

<div>
    <input wire:dirty.class.remove="bg-green-200" class="bg-green-200" wire:model.lazy="foo">
</div>

bg-green-200 类将在 dirty 时从 input 上删除。

切换元素

没有修饰符的 wire:dirty 指令的默认行为是,元素将一直隐藏直到变脏为止。 如果将其用于输入本身,则可能会产生悖论,但与加载状态一样,dirty 指令可用于使用wire:target 来切换其他元素的外观

<div>
    <span wire:dirty wire:target="foo">Updating...</span>
    <input wire:model.lazy="foo">
</div>

在此示例中,默认情况下将隐藏 span,并且仅在输入元素变脏时才可见。

在其他元素上切换类

类和属性修饰符可以以相同方式用于引用的元素

<div>
    <label wire:dirty.class="text-red-500" wire:target="foo">Full Name</label>
    <input wire:model.lazy="foo">
</div>

现在,当输入脏时,标签文本将接收 text-red-500 类。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~