Laravel Livewire project. Created a dynamic form with conditional fields. Need to add input field type=text when choosing the business type after choosing the business kind ( online/ physical). I've asked on many forums, people gave several instructions, but I'm finding it kinda difficult since I'm not quite experienced when it comes to PHP.

namespace App\Http\Livewire;

use App\Models\Classes;
use App\Models\Section;
use Livewire\Component;

class Conditional extends Component
{
    public $parents = [];
    public $children = [];

    public function mount()
    {
        $this->parents = [
            ['id' => -1, 'title' => 'Select type'],
            ['id' => 1, 'title' => 'Physical Store'],
            ['id' => 2, 'title' => 'Online Shop'],
        ];
    }

    public function onSelectFirst($option)
    {
        switch($option) {
            case '-1': {
                $this->children = [];
                break;
            }

            case '1': {
                $this->children = [
                    ['id' => -1, 'title' => 'Please select'],
                    ['id' => 1, 'title' => 'Restaurant'],
                    ['id' => 2, 'title' => 'Fast Food'],
                    ['id' => 3, 'title' => 'Cafe'],
                    ['id' => 4, 'title' => 'Bar'],
                    ['id' => 5, 'title' => 'Night club'],
                    ['id' => 6, 'title' => 'Other'], // here
                ];

                break;
            }

            case '2': {
                $this->children = [
                    ['id' => -1, 'title' => 'Please select'],
                    ['id' => 7, 'title' => 'Clothes'],
                    ['id' => 8, 'title' => 'Food Delivery'],
                    ['id' => 9, 'title' => 'Other'], // here
                ];

                break;
            }
        }
    }

    public function render()
    {
        return view('livewire.conditional');
    }
}

  <x-jet-label for="business_kind" value="{{ ('Type')}}" />
    <select name="business_kind" id="business_kind" wire:click="onSelectFirst($event.target.value)" wire:change="onSelectFirst($event.target.value)">
      @foreach($parents as $option)
        <option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
      @endforeach
    </select>
  <x-jet-label for="business_type" value="{{ ('Business type')}}"/>
    <select id="business_type" name="business_type" wire:loading.attr="disabled"'>
      @foreach($children as $option)
        <option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
      @endforeach
  </select>
</div>

CodePudding user response：

Look, I reproduce your example and this works well.

    public $parents = [];
    public $selectedParent;
    
    public $children = [];
    public $selectedChildren;

    public $isVisible = false;

    public function mount()
    {
        $this->parents = [
            ['id' => -1, 'title' => 'Select type'],
            ['id' => 1, 'title' => 'Physical Store'],
            ['id' => 2, 'title' => 'Online Shop'],
        ];
    }
    public function render()
    {
        return view('livewire.select-composer')
            ->layout('layouts.app');
    }

    public function updatedSelectedChildren($option)
    {
        if (($this->selectedParent == 1 && $option == 6) || ($this->selectedParent == 2 && $option == 9)) {
            $this->isVisible = true;
        } else $this->isVisible = false;
    }

    public function updatedSelectedParent($option)
    {
        $this->selectedChildren = -1;
        $this->isVisible = false;
        switch($option) {
            case '-1': {
                $this->children = [];
                break;
            }

            case '1': {
                $this->children = [
                    ['id' => -1, 'title' => 'Please select'],
                    ['id' => 1, 'title' => 'Restaurant'],
                    ['id' => 2, 'title' => 'Fast Food'],
                    ['id' => 3, 'title' => 'Cafe'],
                    ['id' => 4, 'title' => 'Bar'],
                    ['id' => 5, 'title' => 'Night club'],
                    ['id' => 6, 'title' => 'Other'], // here
                ];

                break;
            }

            case '2': {
                $this->children = [
                    ['id' => -1, 'title' => 'Please select'],
                    ['id' => 7, 'title' => 'Clothes'],
                    ['id' => 8, 'title' => 'Food Delivery'],
                    ['id' => 9, 'title' => 'Other'], // here
                ];

                break;
            }
        }
    }

and the blade component

<div class="d-flex">
        {{--    <x-jet-label for="business_kind" value="{{ ('Type')}}" />--}}
        <div wire:key="select-parent" wire:ignore.self>
            <select id="business_kind" wire:model="selectedParent">
                @foreach($parents as $option)
                    <option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
                @endforeach
            </select>
        </div>
        {{--    <x-jet-label for="business_type" value="{{ ('Business type')}}"/>--}}
        <div wire:key="select-children">
            <select id="business_type" wire:loading.attr="disabled" wire:model="selectedChildren">
                @foreach($children as $option)
                    <option value="{{ $option['id'] }}">{{ $option['title'] }}</option>
                @endforeach
            </select>
        </div>
        @if($isVisible)
            <input type="text" class="form-control" value="Done!">
        @endif
    </div>