php - Laravel livewire 实时验证故障，移动连接速度慢

Question

在尝试实现https://laravel-livewire.com/docs/2.x/input-validation - Real-time Validation 时，我注意到了一个问题。假设我们有 3 个带有实时验证的输入，如果我在第一个输入中输入一些值并单击选项卡转到下一个输入，我再次输入该值并转到 3 个输入，第二个和/或第三个输入会出现故障，因为有 3 个请求（如果您使用https://laravel-livewire.com/docs/2.x/properties#lazy-updating）或者如果您不使用它甚至更多请求。因此，来自第二个和/或第三个输入的值会消失，直到所有请求都到达服务器。这可能是正常互联网连接的通知，但在互联网速度较慢的情况下更为明显。

重现步骤：

1. 使用此内容创建一个 livewire 组件

namespace App\Http\Livewire;

use Livewire\Component;

class ShowPosts extends Component
{
    protected $rules = [
        'field1' => 'required',
        'field2' => 'required',
        'field3' => 'required',
    ];

    public $field1;
    public $field2;
    public $field3;

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName, $this->rules);
    }

    public function render()
    {
        return view('livewire.show-posts');
    }
}

2. 而这个观点

<div>
    <form wire:submit.prevent="submit">
        <div class="form-group mb-3 col-12">
            <input class="form-control" type="text" wire:model="field1">
        </div>
        <div class="form-group mb-3 col-12">
            <input class="form-control" type="text" wire:model="field2">
        </div>
        <div class="form-group mb-3 col-12">
            <input class="form-control" type="text" wire:model="field3">
        </div>
    </form>
</div>

3. 使用 @livewire('show-posts') 将其包含在刀片视图中
4. 在 chrome 开发工具中，转到网络->在线下拉菜单->选择慢速 3g 连接
5. 尝试为每个输入输入值并使用选项卡转到下一个，您会注意到上一个输入的值消失或更改为修改前的最后一个值

可以做些什么来避免输入值的消失/更改？

标签： phplaravelvalidationlaravel-livewire