Hello Everyone!
I have a form that allows iterative multiple select values. For the select field, I used select2 field with wire:ignore
but because the select fields are iterative and multiple if I tied to remove one select field from the form I get either item removed from livewire property with all the under select fields being empty or removal of the select field while keeping unnecessary data on my livewire property.
here is a sample code:
<div>
@dump($elements)
@foreach ($elements as $element)
<div
x-data="{
removeField() {
$($el).remove() // if this line and the next line swapped, I will get either of the above mentioned results
$wire.removeRaterField({{ $loop->index }})
}
}">
<div class="form-group">
<label for="rater_type-{{ $loop->index }}">Element #{{ $loop->index + 1 }}</label>
<x-select-two-field name="elements[]" placeholder="Select Rater Type #{{ $loop->index + 1 }}" required :iterable="$iterable" wire:model="elements.{{ $loop->index }}" />
</div>
<div class="d-flex justify-content-end">
<div class="btn-group" role="group">
@if ($loop->last)
<button type="button" class="btn btn-success btn-sm" wire:click="addRaterField">Add Rater</button>
@endif
@if (($loop->last && !$loop->first) || !$loop->last)
<button type="button" class="btn btn-danger btn-sm" @click="removeField()">Remove Rater</button>
@endif
</div>
</div>
</div>
@endforeach
</div>
I greatly appreciate if someone could help me with this one. Thanks in advance.