0

我有以下结构：

父组件：

class SiteEditComponent extends Component
{

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

    public $childBlocks = [];

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

以这种方式呈现：

<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>

和子组件：

class TextBlockComponent extends Component
{

    public $block;

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

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

以这种方式呈现（简化）：

<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>

事实上，这两个组件都代表了一个 Laravel 模型。一个站点可以有多个块。跟踪父组件中的子组件的正确方法是什么？
我想实现一个保存按钮，它应该收集 $childBlocks 的所有项目，保存站点并将子块附加到它。我尝试通过使用对其进行建模，wire:model.debounce="childBlocks.key"但绑定似乎不起作用。
我想创建一个关联数组，其中每个块都由一个随机生成的保存块数据的键标识。

4

0 回答 0