Initial select2 value

#1

Hi Everyone,

How do you set initial value(s) to select2?

I have tried the following but it never allows the value inside select2 to be changed afterwards:

document.addEventListener("livewire:load", function (event) {
            window.livewire.hook('afterDomUpdate', () => {
                let category = @this.get('category')
                $('.select2').val(category).trigger('change');
            });
        });
#2 
<div class="col-lg-4">
<label for="referenceHarborId">{{ __('Porto de Referência') }}:</label>
<select id="referenceHarborId" class="form-control-custom select2">
    <option></option>
    @foreach($allHarbors as $harbor)
    <option value="{{ $harbor->id }}" @if($referenceHarborId == $harbor->id){{ 'selected' }}@endif>
        {{ $harbor->name }}
    </option>
    @endforeach
</select>
@error('referenceHarborId') <span class="error">{{ $message }}</span> @enderror
</div>

For initial value, a just verify if the value at the variable exist in the loop. And print ‘selected’.
Of course, to send the new value to Livewire component, and reload the form correctly after update, JS is necessary.

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

This way, I don’t need to trigger ‘change’.
But I already used something like you did. In some cases may be necessary.

#3

Seems not to work if select2 is wrapped with wire:ignore

#4 
<div class="col-lg-4" wire:key="SOME_UNIQUE_KEY">
<div wire:ignore>
    <label for="costCurrencyId">Moeda:</label>
    <select id="costCurrencyId" class="form-control-custom">
        <option></option>
        @foreach($allCurrencies as $currency)
            <option value="{{ $currency->id }}">
               {{ $currency->name }}
           </option>
        @endforeach
    </select>
</div>
</div>

If you need use wire:ignore, just use JS to load the data from livewire component to select field when the page load.

$('#costCurrencyId').val({{ $costCurrencyId}});

Something like that!

#5

@trollfalgar this technique works on regular page. am having trouble having it work inside a bootstrap modal. any idea on how i can get this working?

#6

Hey @vbruce. Sorry the late.

Yes, I use modal, and took me some time to figure out the solution. But it`s simple.
The key is: wire:ignore.self

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