после добавления плагина select2 для выбора опции. Поиск Laravel Livewire не работает

Я работаю с laravel 8 и livewire. После добавления select2 в раскрывающийся список поиск livewire не работает.

это livewire

<?php

namespace App\Http\Livewire\Album;

use App\Models\Album;
use domain\Facades\Gallery\GalleryFacade;
use Livewire\Component;
use Livewire\WithPagination;

class SearchAlbum extends Component
{
    use WithPagination;
    public $searchTerm;
   

    public function render()
    {
        $galleries = GalleryFacade::all();
        $searchTerm = '%' . $this->searchTerm . '%';
        $gallery_id = $this->gallery_id;
       
            return view('livewire.album.search-album', [
                'albums' => Album::where('gallery_id', '=', $gallery_id)->where('name', 'like', $searchTerm)->paginate(12),
                'galleries' => $galleries,
            ]);
        
    }
}

и это параметры выбора в лезвии

 $('#select-gallery').select2({
        placeholder: "Select A Gallery",
    });
<select id="select-gallery" class="custom-select" name="gallery_id" wire:model="gallery_id">
                            <option></option>
                            @foreach ($galleries as $gallery)
                            <option value="{{ $gallery->id }}">{{ $gallery->name }}</option>
                            @endforeach
                        </select>

Я хочу получить все альбомы, относящиеся к выбранной галерее. Но при выборе галереи поиск не производится. Но при использовании опции select без плагина select2 он работает.

Кто-нибудь может помочь решить эту проблему?


laravel laravel-livewire jquery-select2
person SupunSpera    schedule 05.01.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

прежде всего возьмите общедоступную переменную с именем gallery_id в вашем классе SearchAlbum.

После этого вам необходимо внести следующие изменения в blade и jquery:

Лезвие:

<div wire:ignore>
    <select id="select-gallery" class="custom-select" name="gallery_id" 
     wire:model="gallery_id">
        <option value="">Select Gallery</option>
        @foreach ($galleries as $gallery)
          <option value="{{ $gallery->id }}">{{ $gallery->name }}</option>
        @endforeach
    </select>
</div>

jquery:

<script>
    $(document).ready(function() {
        $('#select-gallery').select2();
        $('#select-gallery').on('change', function (e) {
            var data = $('#select-gallery').select2("val");
            @this.set('gallery_id', data);
        });
    });
</script>
person Jayesh Tharwani    schedule 05.01.2021