Bro What the select 2 issue solution pleasee

#1

Could you please share if you know the select2 problem?

1 Like
#2

Hey @velatertach.

Here is the solution to work with select2:

The Field:

<div class="col-lg-4">
    <label for="valueId">{{ __('Field Value') }}:</label>
    <select id="valueId" class="form-control select2" wire:model="valueId">
        <option></option>
        @foreach($values as $value)
        <option value="{{ $value->id }}">{{ $value->name }}</option>
        @endforeach
    </select>
    @error('valueId') <span class="error">{{ $message }}</span> @enderror
</div>

The JS needed:

@push('scripts)
$(document).ready(function () {
    $('#valueId').change(function (e) {
        let elementName = $(this).attr('id');
        @this.set(elementName, e.target.value);
    });
});
document.addEventListener("livewire:load", function () {
    window.livewire.hook('afterDomUpdate', () => {
        $('#valueId').select2({
            placeholder: 'Selecione uma opção',
            width: '100%'
        });
    });
});
@endpush

And, in case you use modal, do that:

<div class="modal fade" id="{{ $id }}" data-backdrop="static" data-keyboard="false" wire:ignore.self >
<div class="modal-dialog {{ $size }}" role="document">
    <div class="modal-content" wire:ignore.self>
        <div class="modal-header">
            <h6 class="modal-title"><i class="{{ $icon }}"></i> {{ $title }}</h6>
        </div>
        <div class="modal-body">
            {{ $body }}
        </div>
        <div class="modal-footer justify-content-center">
            {{ $footer }}
        </div>
    </div>
</div>
</div>
1 Like
#3

Thanks bro but i fixed like this.
$(".select2").on("change", function () { @this.comments = $(this).val(); });

1 Like
#4

Perfect!
In my case, I had to use more code xD