'Bind Livewire component to parent array

I have the following structure:

A parent component:

class SiteEditComponent extends Component
{

    protected $listeners = ['upClicked', 'downClicked', 'childUpdated'];

    public $childBlocks = [];

    public function render()
    {
        return view('livewire.site-edit-component', ['childBlocks' => $this->childBlocks]);
    }
}

Which renders that way:

<div>
    <button wire:click="addBlock" type="button" class=" mb-3 inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Block hinzufügen</button>
    @foreach($childBlocks as $key => $childBlockContent)
        <livewire:templates.text-block-component wire:model.debounce="childBlocks.key" :block="$childBlockContent" :wire:key="$key">
    @endforeach
</div>

And the child component(s):

class TextBlockComponent extends Component
{

    public $block;

    protected $rules = [
        'block.title' => ''
    ];

    public function render()
    {
        return view('livewire.text-block-component', [
            'block' => $this->block
        ]);
    }

Which renders that way (simplified):

<div>
    <div class="bg-white shadow sm:rounded-lg mb-3">
        <div class="px-4 py-5 sm:p-6">
            <div
                class=" w-1/3 border border-gray-300 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-indigo-600 focus-within:border-indigo-600">
                <label for="name" class="block text-xs font-medium text-gray-900">Titel</label>
                <input wire:model.debounce="block.title" type="text" name="title" id="name"
                       class="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm"
                       placeholder="Blocküberschrift">
            </div>
        </div>
    </div>
</div>

In fact both components represent a Laravel model. A site can have multiple blocks. What would be the right way to keep track of the child components in the parent component?
I want to implement a save button which should collect all items of $childBlocks, save the Site and attach the childBlocks to it. I tried to model it by using wire:model.debounce="childBlocks.key" but the binding doesn't seem to work.
I wanted to create an associative array in which every block is identified by a randomly generated key which holds the block data.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source