Laravel Livewire repeating the last query

Viewed 28

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:

enter image description here

Then I will add a new row with empty fields:

enter image description here

The data has been updated and now I will remove one field:

enter image description here

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):

enter image description here

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:

enter image description here

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".

0 Answers
Related