Dynamic form with dependent dropdown in laravel livewire - laravel

Question

I have followed this youtube link for populating dynamic form and i have it working in other livewire component. And also use this link to populate dependent dropdown in another livewire component, and both are working like a charm. Now I need to create dynamic form with dependent dropdown inside one livewire components and cannot get working
Below are from livewire blade
#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>
And in Livewire components
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');
}
}
If I do like link2 tutorial like below then it can work
{
public function updatedEmployeeQualifications0QualificationId($qId)
{
if (!is_null($qId)) {
$this->streams = Subject::where('qualification_id', $qId)->get();
}
}
}
but I have to prepare around 10 or more method and it's not a logic for developers, how can I make dynamic function like updatedEmployee{anyno}{anyname}
Sorry for bad English and thanks in advance

Answer 1

Add 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>
And in Livewire components, I changed the following changes.
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();
}
}
}