父视图表单提交Livewire子组件渲染的多输入字段仅最后一个生效如何解决

问题原因 #

你当前所有循环渲染的输入框name属性都为固定值step_，浏览器提交表单时，同名的表单参数会被后出现的参数值覆盖，所以最终后端只能接收到最后一个输入框的值。

解决方案（最小改动，适配现有普通表单提交逻辑） #

仅需要修改edit-step.blade.php中输入框的name属性为数组格式即可：

1. 如果不需要关联原有步骤ID，直接用索引数组即可：

@foreach($steps as $step)
    <div class="flex justify-center py-2" wire:key="{{$loop->index}}" >
        <!-- 核心改动：把name属性改成steps[] -->
        <input type="text" name="steps[]" class="py-1 px-2 border rounded" placeholder="{{ 'Describe Step '.($loop->index + 1) }}" @if ( is_object($step) ) value="{{ $step->name }}" @endif />
        <span class="fas fa-times text-red-400 p-2" wire:click="remove({{$loop->index}})"/>
    </div>
@endforeach

2. 如果需要关联原有步骤ID方便后续更新对应记录，可以将name设为关联数组：

<!-- 数组键为原有步骤ID，后端直接用键更新对应记录即可 -->
<input type="text" name="steps[{{ $step->id }}]" class="py-1 px-2 border rounded" placeholder="{{ 'Describe Step '.($loop->index + 1) }}" @if ( is_object($step) ) value="{{ $step->name }}" @endif />

后端接收处理示例 #

在对应控制器的update方法中直接接收steps数组即可，参考验证和处理逻辑：

public function update(Request $request, $todoId)
{
    $validated = $request->validate([
        'title' => 'required|string|max:255',
        'description' => 'required|string',
        'steps' => 'required|array',
        'steps.*' => 'required|string|max:255'
    ]);

    // 更新待办主记录
    $todo = Todo::findOrFail($todoId);
    $todo->update($validated);

    // 批量更新步骤记录
    foreach ($validated['steps'] as $stepId => $stepName) {
        $todo->steps()->where('id', $stepId)->update(['name' => $stepName]);
    }

    return redirect()->back();
}

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