Livewire 3多输入框数组嵌套数据绑定实现问询

核心思路 #

Livewire 3不支持的是复杂嵌套对象或多维数组的深层绑定，但对于一维数组的明确索引键绑定（如video.1）完全兼容。只需确保组件中预先初始化数组的对应索引键，即可实现预期的双向绑定效果。

1. 修改 ListingEdit 组件代码 #

use Livewire\Component;
use Livewire\WithFileUploads;

class ListingEdit extends Component
{
    use WithFileUploads;

    public ListingData $listing;

    // 预先初始化数组的1、2、3索引键，确保Livewire能识别绑定
    public $video = [1 => '', 2 => '', 3 => ''];

    // 验证规则保持不变，可按需补充约束
    protected $rules = [
        'video.*' => 'nullable|string|max:80',
    ];

    public function mount()
    {
        // 从模型加载现有数据（编辑场景下）
        // 假设ListingData模型对应字段为video1、video2、video3
        $this->video[1] = $this->listing->video1 ?? '';
        $this->video[2] = $this->listing->video2 ?? '';
        $this->video[3] = $this->listing->video3 ?? '';
    }

    public function save()
    {
        $this->validate();

        // 将绑定的数组值同步到模型
        $this->listing->video1 = $this->video[1];
        $this->listing->video2 = $this->video[2];
        $this->listing->video3 = $this->video[3];
        $this->listing->save();

        // 可选：添加成功提示或跳转逻辑
        session()->flash('message', '列表编辑完成');
        return redirect()->route('listings.index');
    }
}

2. 修改 Blade 视图代码 #

修正wire:model写法及输入框type参数错误，补充验证错误提示：

@for ($i = 1; $i <= 3; $i++)
    <div class="{{ $i != 3 ? 'mb-3' : '' }}">
        <x-input-label for="video{{ $i }}" :value="__('Video [num]', ['num' => $i])" />
        <x-text-input-post 
            id="video{{ $i }}" 
            type="text" 
            wire:model="video.{{ $i }}"
            placeholder="嵌入YouTube视频链接" 
            maxChar="80"
            autocomplete="off" 
        />
        {{-- 显示对应索引的验证错误 --}}
        @error('video.' . $i)
            <span class="text-red-500 text-sm mt-1 block">{{ $message }}</span>
        @enderror
    </div>
@endfor

关键说明 #

• 组件中预先初始化$video = [1 => '', 2 => '', 3 => '']是核心：确保数组存在1、2、3这三个索引键，Livewire才能正确追踪绑定值的变化。
• 验证规则video.*会自动覆盖所有video数组下的索引项，无需单独为每个索引编写规则。
• 保存时直接将$video[1]、$video[2]、$video[3]同步到模型对应字段即可完成数据持久化。

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