Laravel Livewire单动态输入框键值重复问题求助

你遇到的核心问题是动态输入框的数组绑定没用到唯一索引标识，新增的输入项共享了同一个绑定路径，Livewire没法区分不同输入项，最终输出数组时所有值全一致。

1. 调整Livewire组件类代码 #

用数组存储输入项，新增时直接往数组里追加空值（数组索引天然就是唯一标识），移除后记得重新索引数组避免断层。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class DynamicSingleInput extends Component
{
    // 用数组存所有输入项
    public $inputs = [];

    public function mount()
    {
        // 初始化至少一个输入框
        $this->inputs[] = '';
    }

    // 新增输入框
    public function addInput()
    {
        $this->inputs[] = '';
    }

    // 移除指定输入框
    public function removeInput($index)
    {
        if (count($this->inputs) > 1) { // 至少留一个输入框
            unset($this->inputs[$index]);
            // 重新索引，避免索引断层导致绑定失效
            $this->inputs = array_values($this->inputs);
        }
    }

    // 提交示例
    public function submit()
    {
        // 这里可以做验证、存库等操作
        dd($this->inputs);
    }

    public function render()
    {
        return view('livewire.dynamic-single-input');
    }
}

2. 调整Blade视图代码 #

循环数组时，用数组索引作为绑定的唯一标识，确保每个输入框对应数组的独立位置。

<div>
    <form wire:submit.prevent="submit">
        @foreach($inputs as $index => $value)
            <div class="flex items-center mb-3">
                <!-- 绑定到数组的对应索引 -->
                <input type="text" wire:model="inputs.{{ $index }}" class="border rounded px-3 py-1 mr-2">
                <!-- 移除按钮，传递当前索引 -->
                @if(count($inputs) > 1)
                    <button type="button" wire:click="removeInput({{ $index }})" class="text-red-600 hover:text-red-800">删除</button>
                @endif
            </div>
        @endforeach

        <button type="button" wire:click="addInput" class="mt-2 bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600">添加输入框</button>
        <button type="submit" class="mt-2 ml-3 bg-green-500 text-white px-4 py-1 rounded hover:bg-green-600">提交</button>
    </form>
</div>

关键注意点 #

• 绑定路径wire:model="inputs.{{ $index }}"是核心，确保每个输入框对应数组的独立位置，Livewire能准确跟踪每个值的变化。
• 移除项后必须用array_values()重新索引数组，不然出现非连续索引（比如0、2）会导致Livewire绑定异常。
• 初始化至少一个输入框，避免页面加载时无输入项的尴尬情况。

提交表单后，dd($this->inputs)会输出每个输入框的独立值，比如：

array:3 [▼
  0 => "第一个输入内容"
  1 => "第二个输入内容"
  2 => "第三个输入内容"
]

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