Livewire Pagination + Select2

#1

I have a blade loop that loops through various users, I then have a script tag that pushes the JS to render select2 to the stack. However, when clicking next on my livewire pagination, the input loses select2.

 @foreach($users as $user)
 .......
@push('scripts')
document.addEventListener('DOMContentLoaded', function () {
   $("#js-edit-user-{{ $user->id }}").select2();
   });
 document.addEventListener("livewire:load", function (event) {
         window.livewire.hook('afterDomUpdate', function() {
         $("#js-edit-user-{{ $user->id }}").select2();
       });
    @endpush
     @endforeach

I tried using the livewire:load afterDomUpdate hook to attempt to reinitialize select2 on the input but this doesn’t seem to work. Adding wire:ignore to the input/container element didn’t help either. Any ideas?

#2

Solved it by moving the wire:load hook to the index page and initialized the select2 input using a class selector.

       document.addEventListener("livewire:load", function (event) {
        window.livewire.hook('afterDomUpdate', function() {
            $(".js-edit-org-type").select2();
        });
    });