Livewire 3 Nested Data Binding in Multiple Inputs [Array]

Question

I would like to create 3 inputs to input video so here but it should depend in array. Nested Data binding is not supported in Livewire 3. However, I need to achieve video.1 video.2, and video.3

Livewire [ListingEdit Component]

protected $rules = [
    'video.*' => 'nullable',
];

class ListingEdit extends Component
{
    use WithFileUploads;
    public ListingData $listing;

    public $video = []; // video 1, video 2, video 3

Livewire [ListingEdit Blade]

@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="old('video')" wire:model="video.{{$i}}"
            placeholder="Embed youtube video" maxChar="80"
            autocomplete="video" />

    </div>
@endfor

The wire:model would be look like video.1, video.2, video.3

Answer 1

Finally, I found out the issue, first.

The ListingEdit Blade [nothing to change]

protected $rules = [
    'video.*' => 'nullable',
];

class ListingEdit extends Component
{
    use WithFileUploads;
    public ListingData $listing;

    public $video = []; // video 1, video 2, video 3

I changed the blade with this following

@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}}" wire:model="video.{{$i}}" name="video[]"
            placeholder="Embed youtube video" maxChar="80"
            autocomplete="video" />

    </div>
@endfor

I changed wire model with "video.{{$i}}

And also if your data comes from eloquents data. You need to define it since Livewire 3 does not support Nested Binding Data. Or you can also activate it from

/config/livewire.php

Then change this following line

'legacy_model_binding' => false,