Laravel LiveWire实时验证故障，移动连接缓慢

如何解决Laravel LiveWire实时验证故障，移动连接缓慢

在尝试实现https://laravel-livewire.com/docs/2.x/input-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');
    }
}

1. 这个观点

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

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

如何避免输入值的消失/改变？