laravel livewire 中具有依赖下拉列表的动态表单

Question

我已经按照youtube link 来填充动态表单，并且我让它在其他 livewire 组件中工作。并且还使用这个link 来填充另一个 livewire 组件中的相关下拉列表，并且两者都像魅力一样工作。现在我需要在一个 livewire 组件中创建具有依赖下拉列表的动态表单，并且无法正常工作

以下来自livewire刀片

@foreach ($employeeQualifications as $qualiIndex => $empQuali)
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="w-full relative">
        <select wire:model.lazy="employeeQualifications.{{ $qualiIndex }}.qualification_id" class="input w-full border-gray-300 text-base text-gray-600 focus:text-green-600 focus:border-green-600 focus:outline-none focus:ring-green-600">
            <option>Select Qualification</option>
            @foreach ($qualifications as $qualification)
                <option value="{{ $qualification->id }}">{{ $qualification->name }}</option>
            @endforeach
        </select>
        <label class="tracking-wide text-gray-500 text-xs font-semibold label" for="qualification">
            Qualification*
        </label>
    </div>
    
    <div class="w-full relative">
        <select wire:model.lazy='employeeQualifications.{{ $qualiIndex }}.subject_id' class="input w-full border-gray-300 text-base text-gray-600 focus:text-green-600 focus:border-green-600 focus:outline-none focus:ring-green-600">
            <option>Select Subject/Stream</option>
            @foreach ($streams as $subject)
                <option value="{{ $subject->id }}">{{ $subject->name }}</option>
            @endforeach
        </select>
        <label class="tracking-wide text-gray-500 text-xs font-semibold label" for="subject">
            Subject/Stream
        </label>
    </div>
</div>
@endforeach

<div class="flex w-full mt-2 justify-between">
  <button type="button" class="text-green-600 uppercase font-semibold text-sm" wire:click.prevent='addMoreQualification'>Add More</button>
  @if (count($employeeQualifications) > 1)
    <button type="button" class="text-red-600 uppercase font-semibold text-sm" wire:click.prevent='removeQualification'>Remove</button>
  @endif
</div>

在 Livewire 组件中

class EducationDetail extends Component
{

 public $qualifications;
 public $streams;
 public $employeeQualifications = [];

 public function addMoreQualification()
 {
    $this->employeeQualifications[] = ['qualification_id' => null, 'subject_id' => null];
 }

 public function removeQualification()
 {
    unset($this->employeeQualifications[array_key_last($this->employeeQualifications)]);
    $this->employeeQualifications = array_values($this->employeeQualifications);
 }

 public function mount()
 {
    $this->qualifications = Qualification::get();
    $this->streams = collect();

    $this->employeeQualifications = [
        ['qualification_id' => null, 'subject_id' => null]
    ];
 }

 public function render()
 {
    return view('livewire.web.auth.education-detail');
 }
}

如果我喜欢下面的 link2 教程，那么它可以工作

{
  public function updatedEmployeeQualifications0QualificationId($qId)
  {
    if (!is_null($qId)) {
      $this->streams = Subject::where('qualification_id', $qId)->get();
    }
  }
}

但是我必须准备大约10个或更多的方法，这对开发人员来说不是一个逻辑，我怎样才能制作像updatedEmployee{anyno}{anyname}这样的动态函数

抱歉英语不好，提前致谢

Answer 1

添加wire:change="setEmployeeQualifications($event.target.value, {{ $key }})"

@foreach ($employeeQualifications as $qualiIndex => $empQuali)
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="w-full relative">
         <select wire:model.lazy="employeeQualifications.{{ $qualiIndex }}.qualification_id" 
wire:change="setEmployeeQualifications($event.target.value, {{ $key }})" 
class="input w-full border-gray-300 text-base text-gray-600 focus:text-green-600 focus:border-green-600 focus:outline-none focus:ring-green-600">
                <option>Select Qualification</option>
                @foreach ($qualifications as $qualification)
                    <option value="{{ $qualification->id }}">{{ $qualification->name }}</option>
                @endforeach
            </select>
        <label class="tracking-wide text-gray-500 text-xs font-semibold label" for="qualification">
            Qualification*
        </label>
    </div>
    
    <div class="w-full relative">
        <select wire:model.lazy='employeeQualifications.{{ $qualiIndex }}.subject_id' class="input w-full border-gray-300 text-base text-gray-600 focus:text-green-600 focus:border-green-600 focus:outline-none focus:ring-green-600">
            <option>Select Subject/Stream</option>



            @foreach ($this->employeeQualifications[$qualiIndex]['streams'] as $subject)
                <option value="{{ $subject->id }}">{{ $subject->name }}</option>
            @endforeach
        </select>
        <label class="tracking-wide text-gray-500 text-xs font-semibold label" for="subject">
            Subject/Stream
        </label>
    </div>
</div>
@endforeach

<div class="flex w-full mt-2 justify-between">
  <button type="button" class="text-green-600 uppercase font-semibold text-sm" wire:click.prevent='addMoreQualification'>Add More</button>
  @if (count($employeeQualifications) > 1)
    <button type="button" class="text-red-600 uppercase font-semibold text-sm" wire:click.prevent='removeQualification'>Remove</button>
  @endif
</div>

在 Livewire 组件中，我更改了以下更改。

class EducationDetail extends Component
{

 public $qualifications;
 public $streams;
 public $employeeQualifications = [];

 public function addMoreQualification()
 {
    $this->employeeQualifications[] = ['qualification_id' => null, 'subject_id' => null,  'streams' => null];
 }

 public function removeQualification()
 {
    unset($this->employeeQualifications[array_key_last($this->employeeQualifications)]);
    $this->employeeQualifications = array_values($this->employeeQualifications);
 }

 public function mount()
 {
    $this->qualifications = Qualification::get();
    $this->streams = collect();

    $this->employeeQualifications = [
        ['qualification_id' => null, 'subject_id' => null, 'streams' => null]
    ];
 }

 public function render()
 {
    return view('livewire.web.auth.education-detail');
 }

public function setEmployeeQualifications($qId, $key)
      {
         if (!is_null($qId)) {
          $this->employeeQualifications[$key]['streams'] = Subject::where('qualification_id', $qId)->get();
         }
      }

}