Best way to hook up Livewire with JS Form Repeater

@Basti0208 first, i'm not fully understanding the OP code <script> part and the JS Form Repeater

but now the problem is here ?

        <div class="col-md-4">
            <x-form::inputs.input
                name="name"
                wire:model.defer="name"
                :required="true"
                placeholder="Name"
            />
        </div>

livewire @entangle just like a bridge used between front-end and back-end, can it solve your problem ?

    <div x-data="{ name: @entangle('name').defer }">
        ...

        <div class="col-md-4">
            <x-form::inputs.input
                {{-- name="name" --}}
                {{-- wire:model.defer="name" --}}

                x-model="name"
                :required="true"
                placeholder="Name"
            />
        </div>

        ...
    </div>

@newbie360 What part do you not understand? Maybe I can explain it.

The problem is that livewire does not recognize the change of the input if it's added by the form repeater. The input gets transformed into something like this:

<input type="text" name="contactPersons[0][name]" wire:model="contactPersons.0.name" />

The added inputs get the same name but the index is increased.

I will try it with AlpineJS and entangle. Thank you for the idea, I will give some feedback once I've tested it.

@Basti0208 be careful read here

<x-form::inputs.input

	{{-- don't use both here, use the x-model only, let the Alpine JS handle the DOM --}}
    wire:model.defer="name"
    x-model="name"


    :required="true"
    placeholder="Name"
/>

@newbie360 I will give it a try, thanks!

@Basti0208 and also you need set $contactPersons as array in the livewire class

@newbie360 What would be the best way to bind the AlpineJS property to the desired array index? My JS snippet converts the wire:model="name" into wire:model="contactPersons.0.name". How would I do that in your example?

@Basti0208 hmmm may be given a clean example, after you playing with this, you will understand how to work

Livewire component class

    public $tests = [
        'a',
        'b',
    ];

Livewire component blade code

<div>

    @json($tests)

    <div x-data="{ tests: @entangle('tests') }" class="flex flex-col space-y-4">

        <template x-for="(test, index) in tests">
            <input x-model.debounce.1000ms="tests[index]" type="text">
        </template>

        <span x-text="tests"></span>
    </div>

</div>

just copy above code for test

in your case, you should remove .debounce.1000ms

and keep to use @entangle('tests').defer

because i try to let you real time can see the effect on the browser.

keep an eyes on the browser network XHR tag

@newbie360 Hi, so I've set up the environment with AlpineJS. I am facing the issue that an error occurs once the new row is being added: Alpine Expression Error: fields[1] is undefined.

That is the code in the component:

<div id="{{ $id }}"
     class="fv-row mb-10"
     x-data="{
        fields: @if($useLivewire) @entangle($groupName).defer @else [] @endif,
        initRepeater() {
            let repeater = $(this.$refs.repeater);
            let fields = this.fields;

            if (repeater.data('repeater-initialized')) {
                return;
            }

            console.log('initRepeater', this.fields);

            const setLivewireModel = function (element, name) {
                // Find the index of the current item
                let index = element.closest('[data-repeater-item]').index();

                // Check if the index exists in the fields array
                if (typeof fields[index] === 'undefined') {
                    fields[index] = {};
                }

                // Check if the name exists in the fields array
                if (typeof fields[index][name] === 'undefined') {
                    fields[index][name] = null;
                }

                // Set the name
                name = 'fields[' + index + '].' + name;

                // Set the wire:model attribute name
                element.attr('x-model', name);
            };

            repeater.repeater({
                initEmpty: false,
                isFirstItemUndeletable: {{ $required ? 'true' : 'false' }},

                defaultValues: @json($defaultValues, JSON_FORCE_OBJECT),

                show: function () {
                    $(this).slideDown();

                    {{ $showScript ?? '' }}

                    $(this).find('[livewire-input]').each(function () {
                        setLivewireModel($(this), $(this).attr('livewire-input'));
                    });
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);

                    {{ $hideScript ?? '' }}

                    // Remove the item from the fields array
                    let index = $(this).index();
                    let removed = fields.splice(index, 1);
                    console.log('hide', index, fields, removed);
                }
            });

            repeater.find('[livewire-input]').each(function () {
                setLivewireModel($(this), $(this).attr('livewire-input'));
            });

            repeater.data('repeater-initialized', true);
        }
    }"
     x-init="
        $nextTick(() => {
            initRepeater();
        });

        $watch('fields', (value) => {
            console.log('fields', value);
        });
    "
     x-ref="repeater"
>
    <x-form::general.label :id="$id" :help-text="$helpText" :label="$label" :required="$required"/>
    <!--begin::Form group-->
    <div class="form-group" wire:ignore>
        <div data-repeater-list="{{ $groupName }}">
            <div data-repeater-item>
                {{ $slot }}
            </div>
        </div>
    </div>
    <!--end::Form group-->

    <!--begin::Form group-->
    <div class="form-group mt-5">
        <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
            <i class="ki-duotone ki-plus fs-3"></i>
            {{ __('basic::general.add') }}
        </a>
    </div>
    <!--end::Form group-->
</div>

This is the code in my livewire view (my form):

<x-form::form.elements.repeater id="contact-repeater" :required="true"
                                group-name="contactPersons" :use-livewire="true">
    <div class="form-group row mb-3">
        <div class="col-md-4">
            <x-form::inputs.input
                name="name"
                {{--                                wire:model.defer="name"--}}
                {{--                                x-model="contactPersons[0].name"--}}
                livewire-input="name"
                :required="true"
                placeholder="Name, Vorname"
            />
        </div>
        <div class="col-md-4">
            <x-form::inputs.input
                name="name"
                {{--                                wire:model="email"--}}
                livewire-input="email"
                :required="true"
                type="email"
                placeholder="E-Mail Adresse"
            />
        </div>
        <div class="col-md-4 d-flex align-items-center">
            <a href="javascript:;" data-repeater-delete
                class="btn btn-sm btn-light-danger">
                <i class="ki-duotone ki-trash fs-5"><span class="path1"></span><span
                        class="path2"></span><span class="path3"></span><span class="path4"></span><span
                        class="path5"></span></i>
                {{ __('basic::general.delete') }}
            </a>
        </div>
    </div>
</x-form::form.elements.repeater>

I add the index to the fields array before the attribute is set. Unfortunately, I am getting the error above. Currently I have no idea on how to fix this or where this comes from, maybe you have an idea.

Best regards

@Basti0208 your code is out of my knowledge, i don't know about JS Form Repeater , look like you are using jQuery with Alpine JS

i think you can make more simple code than the current code, may be try to google search any Doc about Livewire with JS Form Repeater

or debug your code from rendered code (NOT the source code)

PS. i guess here is name="email"

            <x-form::inputs.input
                name="name" <<<<<<<<<<<<<<<<<<<<<<<<<<<
                {{--                                wire:model="email"--}}
                livewire-input="email"

@newbie360 I have debugged the code and generated output. I still don't see the error.

The fields array returns the new index at creation of the input field. The input has the correct x-model attribute.

Is there maybe an issue with syncing? Like the array isn't pushed and therefore the AlpineJS cannot access the index?

@Basti0208 i never tired use jQuery with Alpine JS handle the dom at the same time

are you wraped all code into x-data,

<div x-data="{........}">
	// all code inside here
</div>

@newbie360 Yes, I did. I logged a lot of things in the console.

1 email <empty string> 
Proxy { <target>: (2) […], <handler>: {…} }

You can see, that the index 1 is added and the property is correctly set.

I don't get it. Does Alpine need some sort of "timeout" till the values are set? Without entangle it works -> using a simple array.

So the error comes from the entangle and sync with livewire.

@Basti0208

<div>

    @json($tests)

    <div x-data="{ doms: @entangle('tests') }" class="flex flex-col space-y-4">

        <template x-for="(dom, index) in doms">
            <input x-model.debounce.1000ms="doms[index]" type="text">
        </template>

        <span x-text="doms"></span>
    </div>

</div>

if x-model was changed, doms will sync via @entangle('tests')

but we can delay Alpine pass data to @entangle

@entangle('tests')

<input x-model.debounce.999999999999999999ms

and also we can prevent @entangle sync data to backend

@entangle('tests').defer

// here if x-model changed, that means doms also changed
// but .defer prevented send the request, the next request will send the whole doms data to backend
<input x-model

you can think @entangle is bridge

Alpine <<<<  any delay ? >>>> @entangle <<<< sync ? >>>> Livewire 

PS. we can't use like this, this is invalid

x-data="{ doms: @entangle('tests').debounce.1000ms }"

@newbie360 I found my error. It is stupid obvious. I assigned the fields array to a variable which obviously does not use reference and just copied the array. The array was never updated (just locally). Now it's working correctly, at least the adding.

@Basti0208 Good to know ;) keep it up