Laravel Livewire，选择其他时添加输入字段（类型=文本）答案

【问题标题】：Laravel Livewire, adding Input field (type=text) when chosing OtherLaravel Livewire，选择其他时添加输入字段（类型=文本）
【发布时间】：2021-11-10 13:57:00
【问题描述】：

Laravel Livewire 项目。创建了一个带有条件字段的动态表单。选择业务类型（在线/实体）后选择业务类型时需要添加输入字段type=text。我在很多论坛上问过，人们给出了一些说明，但我觉得这有点困难，因为我对 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>

【问题讨论】：

还有，问题出在哪里？
我在选择“其他”时发现添加输入字段框有问题。需要对 html 和 php 进行编辑，但我发现它有点不同。正如我所说，在 php 方面经验不足。
你能把选择元素包装成div，分开吗？另外，在每个上添加 div wire:key 指令。你能测试一下，删除他们的名字属性吗？
试过了，但在选择“其他”时仍然无法添加文本输入字段。

标签： php html laravel laravel-livewire

【解决方案1】：

看，我复制了你的例子，效果很好。

    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;
            }
        }
    }

和刀片组件

<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>

【讨论】：