Liveware值在script标签内不更新，如何获取动态时长使timeout正常生效

问题根源 #

你代码中的{{ $component['duration'] }}是Blade模板在服务端首次渲染页面时直接替换为固定数值的静态值，后续Livewire组件动态更新duration属性时，已加载的script标签不会重新渲染，因此一直保留首次渲染的初始值，无法同步更新。

解决方案 #

你代码中已经通过Livewire.on('nextComponent', duration => {})拿到了服务端推送的最新duration值，直接使用该参数替换掉Blade输出的静态值即可，同时建议增加定时器清理逻辑避免多个定时器叠加运行：

修改后脚本代码 #

<script>
    document.addEventListener('livewire:load', function () {
        // 存储定时器ID，用于清理旧定时器
        let slideTimer = null;

        Livewire.on('nextComponent', duration => {
            // 先清除上一个定时器，避免重复触发
            if (slideTimer) clearTimeout(slideTimer);
            
            // 直接使用事件传过来的最新duration，不要用Blade渲染的静态值
            slideTimer = setTimeout(() => {
                Livewire.emit('nextComponent', duration);
            }, duration * 1000);
        })

        // 首次初始化定时器，用首次渲染的duration即可
        slideTimer = setTimeout(() => {
            Livewire.emit('nextComponent', {{ $component['duration'] }});
        }, {{ $component['duration'] }} * 1000);
    });
</script>

可选补充方案 #

如果需要在事件外随时获取组件的最新duration值，可以给你的Livewire组件绑定唯一ID，通过Livewire实例方法实时取值：

• 给组件标签加属性：<livewire:your-component-name wire:key="slider-component" wire:id="slider-component" />
• 脚本中随时取值：const latestDuration = Livewire.find('slider-component').get('duration')

内容的提问来源于stack exchange，提问作者Asaad Mahmood