Laravel Livewire 3中debounce.500ms无法触发updated钩子的问题

问题描述 #

在Laravel Livewire 3中使用wire:model.debounce.500ms绑定字段code时，组件的updatedCode()生命周期钩子无法触发。但改用wire:model.live="code"可以正常触发钩子，不过会产生过多的网络请求。

原因分析 #

Livewire 3中，wire:model默认采用**deferred（延迟同步）**模式：数据只会在表单提交或执行组件动作时才同步到后端。debounce（防抖）修饰符仅对实时同步的绑定生效，在deferred模式下无法触发实时的数据同步，因此不会调用updated钩子。

解决方案 #

将debounce修饰符与live模式结合使用，写法为wire:model.live.debounce.500ms="code"。这样既会监听输入变化，又会在输入停止500ms后再同步数据，既减少网络请求，又能正常触发updated钩子。

修改后的代码 #

组件代码（无需修改）

class EmailVerify extends Component
{
    public $code; 

    public function updatedCode() 
    {
        dd($this->code);
    }

    public function render()
    {
        return view('livewire.forms.email-verify');
    }
}

视图代码（修改绑定写法）

<div>
    <input
        wire:model.live.debounce.500ms="code"
        id="verifyemail"
        type="text"
        maxlength="4"
    />
</div>

验证效果 #

修改后，当你在输入框中输入内容并停止500ms后，updatedCode()钩子会被触发，dd($this->code)会输出你输入的内容，同时只会产生一次网络请求，避免了频繁请求的问题。

内容的提问来源于stack exchange，提问作者Tony Sawlwin