I have started learning Laravel Livewire and I am trying to make sections where I can add new form groups dynamically. For example, I want to add some descriptions to my product and in one row I can enter this data: name, description, unit, quantity, etc...
After that, I want to make a button where I can click and add one more row with all these inputs but empty.
For now, I have used this blog to make this: https://blog.nterms.com/2021/01/31/edit-items-inhas-many-relationship-with-laravel-livewire.html
Right now, I have a bug where livewire is repeating its last action. For example, if I want to update my data and I remove one field and update another one. On the next request, livewire will try to delete that data again, even though it is already deleted.
Here are some images:
Then I will add a new row with empty fields:
The data has been updated and now I will remove one field:
And send the request again without any changes (so it should do nothing because nothing is changed, but I will get an error that I am trying to delete something):
Also, sometimes it just randomly duplicates the data. Is there any better way to make this?
EDIT NO.1
I was suggested to add the wire:key and this is the result:
I have implemented it like this:
@foreach($this->activeUrls as $key => $url)
<div wire:key="{{ $key }}" class="form-group">
<input wire:model="urls.{{$key}}.url" type="text" value name="url" placeholder="{{ __('Url') }}" class="form-control">
<i wire:click="removeUrl({{$key}})" class="cil-backspace delete-score-row"></i>
</div>
@error('urls.'.$key.'.url')
<span class="text-danger">{{ $message }}</span>
@enderror
@endforeach
And now when I went to update, instead of 1 field updated and one field added I got this:
So, one field was updated, one was added, and later on, the added field should have been updated, instead, it stayed as it was and the application just added a new entry with "update data".




