разделение компонентов и сохранение параметров в Laravel (Livewire)

Q.1) Я хочу разделить форму с несколькими полями ввода примерно на 5 компонентов, потому что существует много полей ввода и причин для UX. Я думаю о экране, который заполняет все содержимое формы до последнего компонента и сохраняет входные значения на сервере. Как лучше всего это сделать? Было бы лучше просто использовать Blade?

Q.2) В этом случае, есть ли способ передать и сохранить параметры от дочернего компонента к родительскому компоненту?

step1.php (компонент)

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>

также в каждом файле просмотра есть кнопки направления. Как использовать $ emitUp

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

laravel laravel-livewire laravel-blade
person JsWizard    schedule 03.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ответы

A.1) Я решил это с помощью директивы @include вместо @switch. директива Laravel @include

//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) Настройте код как ответ №1, значения параметров сохраняются.

Удачного кодирования с Laravel и Livewire ~ !! :)

person JsWizard    schedule 04.01.2021