Livewire动态组件点击按钮未更新问题求助

你的动态组件不更新的核心原因是缺少唯一标识key，Livewire依赖key属性来追踪组件实例的变化，没有指定key时，即使$step改变，Livewire会复用原有组件实例而非渲染新组件。

修改后的视图代码 #

将动态组件添加:key="$step"属性，让Livewire识别到组件需要随$step变化重新渲染：

<div class="flex-1 flex flex-col">
    <livewire:reservation.progress />

    <!-- 添加:key="$step" 触发组件重新渲染 -->
    <livewire:dynamic-component :component="'reservation.step' . $step" :key="$step" />

    <div class="block text-right">
        <x-button wire:click="nextStep" type="button" title="{{ __( 'Next' ) }}" class="bg-lime-400 rounded px-6 py-2.5 text-center text-nowrap text-slate-900 border border-slate-900 hover:text-white hover:bg-slate-900 transition-colors duration-300">
            <i class="fa-solid fa-right-long"></i>
        </x-button>
    </div>
</div>

补充说明 #

1. 确保父组件中$step是public属性，比如在组件类中声明：

public $step = 1;

2. Livewire的DOM diffing机制会对比组件的key值，当key变化时，会销毁旧组件实例并挂载新的目标组件，从而实现动态切换。

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