Data binding in nested/slot components

I’m trying to create a reusable form component.

I’ve added in the form.blade.php a @include('form.inputs') where I have all my inputs.
At this point the data binding works fine with wire:model.

Now I’ve added in the form.inputs view an other component.
This is the component: https://gist.github.com/JeffreyWay/d5d86f48a527d3c3819a67cfb793926d

So the inputs are now between the <x-tab name="First"> and the data binding works no more.

Livewire form component blade:

<div class="form">
	<div class="form-body p-4">
		@include('form.inputs')
    </div>
	<input wire:click.prevent="update()" type="submit" value="send">
</div>

included form.inputs blade:

<x:ui.tabs.container active="Allgemein">
	<x:ui.tabs.tab title="Allgemein" icon="fas fa-bed">

		<input wire:model="title" /> // input disappears on update or value change

	</x:ui.tabs.tab>
	<x:ui.tabs.tab title="Bilder" icon="fas fa-bed">
            ...
	</x:ui.tabs.tab>	
</x:ui.tabs.container>

The title from the model is in the input value, but when I’m trying to update the value, the whole input disappears.

Is that caused by the {{ $slots }} by the Tab component? Would it be a good workaround to emit the data to the form component?

1 Like