Midgard Wide Logo In White

Select2 Wire:model and Wire:click

LiveWire Logo

Wire:model not working in select2

After our last post ( HERE ) regarding livewire and select 2 issues, we recieved a question from an Arun, who was having issues with Wire:Click and Select 2.
 
"""

select class="search form-control product_id" name="product_id" id="product_id" wire:model="search" >                                 @if ($this->result->count() > 0)                                        @foreach ($this->result as $product){{$product->name}} @endforeach                                 @endif                                                             

"""

What The Issue Is

From what we can gather from the initial question, was that when the person was changing the select option (wrapped in a select2 plugin) it was not updating the wire:modal it was assigned to.

What a lot of people do not realise, is that Select2 creates its own DOM when it loads. So what you are changing on the drop down, is not the actual dropdown you have coded.

 

So the first thing you have to do, is wrap the select in a div and ignore it

  < div wire:ignore>

SELECT GOES HERE
<-- select2 will put its new domhere -->
</div>

 

An example of Multiple Select can be seen below (note I have the name of the select different to the variable, to prevent one overriding the other. So although engineer maybe whats on the model, I use engineerSearch[] as the name, as I’m using engineers/engineer elsewhere in the code.)

<div class="form-group row " wire:ignore>
    <label for='day' class='control-label col-md-3'>Engineers</label>
    <div class='col-md-9'>
        <div class="form-control-wrap ">
            <div class=''>
                <select name="engineerSearch[]" id='engineerSearch' wire:model="engineerSearch" class='form-select-engineerSearch' multiple>
                    @foreach($engineers as $engineerID => $name)
                        <option value="{{$engineerID}}">{{$name}}</option>
                    @endforeach
                </select>
                <!-- Select2 will insert it's DOM here. -->
            </div>
        </div>
    </div>
</div>

To fire an event (Say wire:click) on the select. You have to put the JS in livewire file, to fire an event

 

<script>
$(document).ready(function() {
$('#select2').select2();
$('#select2').on('change', function (e) {
var data = $('#select2').select2("val");
@this.set('foo', data);
}); });
</script>

LIVEWIRE ERROR:

Date: Jan 22, 2021 Categories: Factory, Industry, Manufacturing Software: Laravel 8, Livewire, Select2, Mysql Error:
"""

select class="search form-control product_id" name="product_id" id="product_id" wire:model="search" >                                 @if ($this->result->count() > 0)                                        @foreach ($this->result as $product){{$product->name}} @endforeach                                 @endif                                                             


"""
Completed: 2021
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Table of Contents

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact

Midgard Short Logo In White

MyMidgard

Our Online Portal helps you keep ontop of your IT systems. Designed from the ground up by Midgard IT themselves.