Livewire Select2 stop re render on change

Question

I am working on a form with select2 on it. The idea is that when user selects or changes any value in select2 dropdown, need to run a method on selected accountId.

Display some message based on the selected accountId on the component. blade.php file is as following

<div class="col-md-9 col-12">
    <div wire:ignore>
        <select id="accountId" class="form-control" wire:model="accountId">
            @foreach($accounts as $index => $account)
                <option value="{{$index}}">{{ $account }}</option>
            @endforeach
        </select>
   </div>                             
</div>

Following is the script to initiate select2.

$(document).ready(function () {

    $('#accountId').select2().on('change', function (e) {
                    let data = $(this).val();
                    @this.set('accountId', data);
                });
});

How do I capture that data in my Livewire component and run necessary method on that accountId.

public function updatedAccountId($accountId)
{
    if ($accountId) {
        $account = Account::findOrFail($accountId);
        $this->accountAlert = 'some message for user to display';
    }
    else {
        $this->accountAlert = '';
    }
}

Method is called when select2 data is changed but select2 is not re-rendered.

How can I stop re-rendering of select2 or re-render select2 method?

Thank you

Answer 1

Try to use Livewire.hook like:

Maybe this video help you (portuguese).