laravel - Value doesn't change even though select is set to the model - Stack Overflow

admin管理员组

文章数量:1122832

I use select2 to style selects. But in livewire I faced a problem that when I change the value it doesn't change even though the select is set to model

<div class="select2-custom-field select2-without-search">
    <select class="form-control height-40" wire:model="interval">
        @foreach(\App\Models\SavedSearch::listInterval() as $key => $value)
            <option {{$key == \App\Models\SavedSearch::INTERVAL_WEEK ? 'selected' : ''}} value="{{$key}}">{{$value}}</option>
        @endforeach
    </select>
</div>

I tried adding onchange="@this.call('changeInterval', $(this).val());", but then the select, after selecting the value, looks like normal.

Can this be fixed?

I use select2 to style selects. But in livewire I faced a problem that when I change the value it doesn't change even though the select is set to model

<div class="select2-custom-field select2-without-search">
    <select class="form-control height-40" wire:model="interval">
        @foreach(\App\Models\SavedSearch::listInterval() as $key => $value)
            <option {{$key == \App\Models\SavedSearch::INTERVAL_WEEK ? 'selected' : ''}} value="{{$key}}">{{$value}}</option>
        @endforeach
    </select>
</div>

I tried adding onchange="@this.call('changeInterval', $(this).val());", but then the select, after selecting the value, looks like normal.

Can this be fixed?

• laravel
• laravel-livewire

Share Improve this question Follow edited Nov 26, 2024 at 2:22 TUPKAP 5,17922 gold badges44 silver badges1818 bronze badges asked Nov 21, 2024 at 9:59 Тарас ГаврилюкТарас Гаврилюк 3155 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Have you tried changing how the selected option is defined in the options tag? As the styling shouldn't normally interfere with livewire assignment to component properties.

<option @if($key == \App\Models\SavedSearch::INTERVAL_WEEK ) selected @endif value="{{$key}}"> {{$value}} </option>

I assume you are using Livewire 3

Add a wire:ignore in the outer <div>

<div wire:ignore class="select2-custom-field select2-without-search">
    .....

or alternatively you can wrap that <div> with an outer <div> containing the wire:ignore attribute:

<div wire:ignore>
    <div class="select2-custom-field select2-without-search">
        .....
    </div>
</div>

In this way Livewire will not update the <select> which is already managed by the select2

Then to update the $interval variable you can set it on the frontend side using the $wire object:

@script
<script>

    // using $wire.set the value is sent immediately to the backend like wire:model.live
    $(() => { $(".select2-custom-field select").on("change", (e) => {
        $wire.set("interval", e.target.value);
    })});

    // alternatively the value can be set locally and can be updated when you apply an explicit update (like a submit) 
    // $(() => { $(".select2-custom-field select").on("change", (e) => {
    //     $wire.interval = e.target.value;
    // })});


</script>
@endascript

本文标签： laravelValue doesn39t change even though select is set to the modelStack Overflow