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?