Change Nested Comonent for a Multi-Step Form

I’ve got the concept of nested components and firing events down. Is there currently a way to swap out components when the render is hit on update?

I currently have a create.parent, create.step1, and create.step2. In the parent I’ve tried an if statement on which component to show, and creating a property to swap out step1 for step2 @livewire($this->showing) with $this->showing set to ‘create.step1’ on mount, but updating that property doesn’t change it out.

Is this more involved, or am I overlooking something simple?

Great question. I’m not sure why that wouldn’t work. Have you tried to change to a conditional and see if that would work, like the following:

@if($this->showing == 'create.step1')
    @livewire('create.step1')
@endif
@if($this->showing == 'create.step2')
    @livewire('create.step2')
@endif

Just make sure you add a “key”: @livewire('create.step1', key('step1'))

Should work fine though.

The conditional was the first way I tried, but I didn’t key it. I went a different route on that because it was smelling of spaghetti, but I will definitely remember to key it when the need comes to try it again.