Clone row and array model name

What seems to be the problem:

Hi;

I clone form rows with inputs via:
$( $thisRow ).clone(true).insertAfter( $thisRow );

The row clone correctly. They have, for example input with: wire:model="product_name"
After clone we have multiple wire:model="product_name"
The first problem doesn’t make it an array.

I am trying to work around the problem by nesting.
For the first row I set wire:model="product_name.0"
And with clone rename modal in new row by:
$( $thisRow ).children('#product_name').attr("modal", 'product_name.'+index);

Index is of course a larger number than the previous one.
When I send data, the component can only see the tables with the first row.
Is there any way to tell livewire that I added a name with the new model?

I see that the array works for elements with the same name generated by @foreach but I add new lines from javascript.

Are you using the latest version of Livewire: YES

Assuming I understand this correctly without seeing your code, I think the way I would handle it is to replace the jquery clone with a livewire event from javascript, then livewire can handle creating and keeping track of new rows.

I think you understand well. This applies to standard uploads, e.g. <input name = "test []"> and cloning by jquery clone. Livewire can’t see my cloning. If I manually add, e.g. <input wire: model = "test.0"> <input wire: model = "test.1">, I get a handy table. If I add <input wire: model = "test.2"> by cloning, this is no longer visible in the table. Of course, this input can be seen in the source of the page.
I wanted to avoid it, I have a lot of input to watch over.

Change your input to

By doing this way you will generate an array of your input values. However, if your index/keys are number eg[1,2,3,4] you don’t need to loop and return value by keys. If not, just call your loop with key and get your values using it.

@ScripTech you didn’t put your solution in a code block, so it didn’t show up.

I solved this by creating an array and adding elements to it via livewire, not jquery, as you suggested in the first answer. By the way, is it possible to do cloning through Alpine.js. I am not a front specialist. I still have some problems with adding some actions by jquery. I don’t understand what your last answer is about.

Same theory for alpine, use a for loop to display all the items in an array, push to the array and it will add a new one

Anyone mind posting some code snippets of actual solutions? :slight_smile:

Super simple way you can adapt:

public $list = [
    'first',
    'second',
    'third'
];

public function addRowToList()
{
    array_push($this->list, 'new');
}
@foreach ($this->list as $key => $item)
    <input wire:model='list.{{ $key }}' type="text" /><br>
@endforeach
<button wire:click="addRowToList">Click</button>

Missed this. Sorry…and thanks…! :nerd_face: