How to Programmatically Navigate to a Specific Step in a Wizard

How can I programmatically navigate to step 2 ("Delivery") using a function call or dispatch in Livewire? I tried:

Livewire.dispatch('next-wizard-step', { statePath: 'mountedTableActionsData.2' });

Livewire.dispatch('next-wizard-step', { statePath: 'mountedTableActionsData.2' });

However, it's not behaving accurately. Sometimes it goes to step 2, but other times it skips to step 3.

 Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])

 Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])

Solution:

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

...

Jump to solution

4 Replies

LeandroFerreira•5mo ago

Where are you dispatching this? Could you explain?

technocratOP•5mo ago

I have custom livewire component and rendering that using View field, in that custom component i am dispatching it using javascript on a specific websocket event

Solution

LeandroFerreira•5mo ago

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

Wizard::make([...
])
->extraAlpineAttributes(['@update-step.window' => 'step = event.detail.newStep'])

$dispatch('update-step', {newStep: 'delivery'})

$dispatch('update-step', {newStep: 'delivery'})

technocratOP•5mo ago

Thanks A lot man worked like a charm

Gaming

Programming

How to Programmatically Navigate to a Specific Step in a Wizard