Laravel Livewire 带联动下拉的动态表单实现方案咨询

你可以使用Livewire提供的通用updated钩子来处理所有动态行的字段更新事件，无需为每个索引单独声明方法。同时你现有代码中全局的$streams集合仅支持单行联动，多个动态行的选择会互相干扰，需要将其改造为按索引存储的数组结构。

修改后的Livewire组件代码 #

class EducationDetail extends Component
{
    public $qualifications;
    // 改为数组，按行索引存储对应科目标题
    public $streams = [];
    public $employeeQualifications = [];

    public function addMoreQualification()
    {
        $this->employeeQualifications[] = ['qualification_id' => null, 'subject_id' => null];
        // 新增行同步初始化对应科目标题
        $this->streams[] = collect();
    }

    public function removeQualification()
    {
        $lastKey = array_key_last($this->employeeQualifications);
        unset($this->employeeQualifications[$lastKey]);
        unset($this->streams[$lastKey]);
        // 重排索引避免断层
        $this->employeeQualifications = array_values($this->employeeQualifications);
        $this->streams = array_values($this->streams);
    }

    public function mount()
    {
        $this->qualifications = Qualification::get();
        // 初始行初始化科目标题
        $this->streams[0] = collect();
        $this->employeeQualifications = [
            ['qualification_id' => null, 'subject_id' => null]
        ];
    }

    // 通用更新钩子，所有属性变更都会触发
    public function updated($propertyName, $value)
    {
        // 匹配动态行的qualification_id字段更新
        if (preg_match('/^employeeQualifications\.(\d+)\.qualification_id$/', $propertyName, $matches)) {
            $rowIndex = $matches[1];
            if (!is_null($value)) {
                $this->streams[$rowIndex] = Subject::where('qualification_id', $value)->get();
            } else {
                $this->streams[$rowIndex] = collect();
            }
            // 学历变更后清空对应行已选科目
            $this->employeeQualifications[$rowIndex]['subject_id'] = null;
        }
    }

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

修改后的Blade模板代码 #

仅需要调整科目标题的循环部分，其他代码保持不变：

<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[$qualiIndex] ?? [] 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>

核心逻辑说明 #

• 通用updated方法会在组件任意属性更新时触发，第一个参数为更新属性的完整路径，第二个参数为更新后的值
• 通过正则匹配识别出是哪一行的qualification_id发生了变更，仅加载对应行的科目标题，避免不同行之间的选择互相干扰
• 新增/删除行时同步处理$streams数组的索引，保证和$employeeQualifications的索引一一对应

内容的提问来源于stack exchange，提问作者Vpa