Select2 problem with Livewire inside an array of n elements

Hi to all. I have spent an entire week on this, so I give up. I wanted to use a Select2 select with search, wired to a Livewire variable, since the template I use has them, to search for products. After two days I found out that I need the wire:ignore directive so it doesn't lose its appearance when reloading. And after four days more I found out that I need JavaScript (which I don't know) to make it work with wire:model without losing the connection. I made it work with this code, which assigns the variable in the Livewire component manually.

@script
    <script>
        $(document).ready(function() {
            $('#productos').select2();
            $('#productos').on('change', function(e) {
                Livewire.dispatch('producto-elegido', {
                    id: $('#productos').select2("val")
                });
            });
        });
    </script>
@endscript

All set there. The question is that I am making a form to add Invoices, and the invoices can have n lines. So, I need to let the user add lines, and each line must have a new Select2 tied to a new item in the $lines[] array. And I can't put that code of above per each line, first, because it would be too cumbersome, and two, I don't know how to programatically create and point to id names. Because each line should have a Select2 with a new id: something like , being index the iteration variable of the lines array. So, what do you suggest? Discard completely Select2? Another totally different approach? I searched to no avail another select with search for Livewire, no luck. Thank you very much in advance.

samuelaustinudhedhe

1 year ago

Level 1

Hello,

You should use dynamic IDs for each Select2 instance and a reusable JavaScript function to initialize Select2 on each dynamically created dropdown. I'll also show you how to wire everything together using Livewire events.

Livewire Component (InvoiceLines.php) First, in your Livewire component, ensure that you have an array ($lines) where each new line added will store an item.


class InvoiceLines extends Component
{
    public $lines = [];

    public function mount()
    {
        $this->lines = [
            ['product_id' => null], // Single line example
        ];
    }

    public function addLine()
    {
        $this->lines[] = ['product_id' => null]; // Add new empty line
    }

   #[On('productSelected')]		
    public function productSelected($index, $productId)
    {
        $this->lines[$index]['product_id'] = $productId; // Update the selected product ID
    }

    public function render()
    {
        return view('livewire.invoice-lines');
    }
}

``` end PHP

```blade
<div>
    <form>
        @foreach ($lines as $index => $line)
            <div class="line-item">
                <select id="productos-{{ $index }}" class="select2" wire:ignore>
                    <option value="">Select a product</option>
                    <!-- Add your product options here -->
                    <option value="1">Product 1</option>
                    <option value="2">Product 2</option>
                    <option value="3">Product 3</option>
                </select>
            </div>
        @endforeach
    </form>

    <button wire:click.prevent="addLine">Add Line</button>
</div>

@push('scripts')
<script>
    function initSelect2() {
        $('.select2').each(function() {
            $(this).select2(); // Initialize select2 for each element

            $(this).on('change', function(e) {
                let id = $(this).attr('id'); // Get the ID of the select element
                let index = id.split('-')[1]; // Extract the index from the ID

                // Dispatch Livewire event with the selected value and index
                Livewire.dispatch('productSelected', index, $(this).val());
            });
        });
    }

    // Reinitialize Select2 after Livewire updates the DOM
    document.addEventListener('livewire:load', function () {
        initSelect2();
    });

    document.addEventListener('livewire:update', function () {
        initSelect2(); // Re-initialize Select2 after any Livewire update
    });
</script>
@endpush

``` end blade

Please or to participate in this conversation.