I have a livewire component thet loads a dynamic component based on a $step
variable. The idea is to load one of three components based on the value of the variable. The variable is updated when the user clicks a button.
<div class="flex-1 flex flex-col">
<livewire:reservation.progress />
<livewire:dynamic-component :component="'reservation.step' . $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>
The nextStep function is implemented like this:
public function nextStep(): void
{
$this->step += 1;
if ( $this->step > 3 ) {
$this->step = 1;
}
}
My question is... why the dynamic component is not being updated when the user clicks the button. Shouldn't the component refresh when it is changed?
With Livewire 3 the syntax is:
<livewire:dynamic-component :is="$componentName" :key="$uniqueKey" />
or, alternatively:
<livewire:is :component="$componentName" :key="$uniqueKey" />
The :key is mandatory