Laravel alpinejs dynamic forms

Question

I have a code:

<div x-data="{ applicants: 1 }" class="col-span-6 sm:col-span-4">
    <template x-for="(applicant, index) in applicants" :key="index">
        <div class="col-span-6 sm:col-span-4">
            <div class="col-span-6 sm:col-span-4 mb-6">
                <x-jet-label x-bind:for="index + '-start_date'" value="{{ __('Start date') }}" />
                <x-jet-input x-bind:id="index + '-start_date'" type="date" class="mt-1 block w-full" wire:model="state.start_date" />
                <x-jet-input-error for="index + '-start_date'" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4 mb-6">
                <x-jet-label x-bind:for="index + '-end_date'" value="{{ __('End date') }}" />
                <x-jet-input x-bind:id="index + '-end_date'" type="date" class="mt-1 block w-full" wire:model="state.end_date" />
                <x-jet-input-error for="end_date" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4 mb-6">
                <x-jet-label x-bind:for="index + '-inst_name'" value="{{ __('Institution name') }}" />
                <x-jet-input x-bind:id="index + '-inst_name'" type="text" class="mt-1 block w-full" wire:model="state.name" />
                <x-jet-input-error for="index + '-inst_name'" class="mt-2" />
            </div>
        </div>
    </template>
    <div>
        <hr class="my-3 border-t border-gray-300">
        <button class="text-primary appearance-none underline" type="button" x-on:click="applicants++">Add new</button>
        <button class="text-red-500 appearance-none underline pl-3" type="button" x-on:click="applicants--" x-show="applicants > 1">Remove</button>
    </div>
</div>

I have a dynamic forms, it working good, new fields can be added and removed, but I have other problem. When I submit this form, I get null values (start_date, end_date, name) on the livewire component. How I can resolve this? I think, that problem in <template>, because if I remove <template> tags, then all working, but I can't use directive x-for, and then my dynamic forms is not work.

question from:https://stackoverflow.com/questions/65940189/laravel-alpinejs-dynamic-forms

Answer 1

Waitting for answers