component split and keep parameters in Laravel(Livewire)

Question

Q.1) I want to split a form with multiple input fields into about 5 components because there are many input fields and UX reasons. I am thinking of a screen that fills out all the contents of the form up to the last component and saves the input values to the server. What's the best way to do it? Would it be better to just use the Blade?

Q.2) In this case, Is there any way to pass and keep parameters from child component to parent component?

step1.php(component)

class Step1 extends Component
{
    public $step = 1;
    public $step1DataTitle; //test reason
    public $step2DataTitle;
    public $step3DataTitle;
    public $step4DataTitle;
    public $step5DataTitle;
    public $step6DataTitle;

    protected $listeners = ['moveBack' => 'moveBack', 'moveNext' => 'moveNext'];

    public function render()
    {
        return view('livewire.sending.step1', ['step' => $this->step]);
    }

    public function moveBack()
    {
        $this->step = $this->step - 1;
    }

    public function moveNext()
    {
        $this->step = $this->step + 1;
    }

step1.blade.php

<div>
    @switch($step)
    @case(1)
    @livewire('sending.step1')
    @break
    @case(2)
    @livewire('sending.step2')
    @break
    @case(3)
    @livewire('sending.step3')
    @break
    @case(4)
    @livewire('sending.step4')
    @break
    @case(5)
    @livewire('sending.step5')
    @break
    @default
    @livewire('sending.default')
    @endswitch
</div>

also each View file have directional buttons. How to use $emitUp

<input wire:model="step5DataTitle"/> //test reason
  <div class="flex justify-between">
     <button wire:click="$emitUp('moveBack')"/>
     <button wire:click="$emitUp('moveNext')"/>
  </div>

JsWizard JsWizard · Accepted Answer · 2021-01-04T13:40:15

Answers

A.1) I solved it using @include directive instead @switch. Laravel @include directive

//Component and each View file have directional buttons are same.

//View
@if($step === 1)
   @include('livewire.sending.step1')
@elseif($step === 2)
   @include('livewire.sending.step2')
@elseif($step === 3)
   @include('livewire.sending.step3')
@elseif($step === 4)
   @include('livewire.sending.step4')
@elseif($step === 5)
   @include('livewire.sending.step5')
@elseif($step === 6)
   @include('livewire.sending.step6')
@else
   <div>default step page</div>
@endif

**A.2) Configure the code as answer no.1, there parameter values are retained.

Happy coding with Laravel and Livewire~!! :)

component split and keep parameters in Laravel(Livewire)

1 Answers

Answers