添加 select2 插件以选择选项后 Laravel Livewire 搜索不起作用

如何解决添加 select2 插件以选择选项后 Laravel Livewire 搜索不起作用

我正在使用 laravel 8 和 livewire。将 select2 添加到下拉 select 后，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>

我想检索与所选图库相关的所有专辑。 But when select a gallery it does not search.但是当使用没有 select2 插件的选择选项时，它可以工作。

有人可以帮忙解决这个问题吗？

解决方法

首先在 SearchAlbum 类中获取名为 gallery_id 的公共变量。

之后，您必须在刀片和 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>