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

【问题标题】：after adding select2 plugin to select option . Laravel Livewire search not working添加 select2 插件以选择选项后。 Laravel Livewire 搜索不起作用
【发布时间】：2021-04-11 01:17:54
【问题描述】：

我正在使用 laravel 8 和 livewire。将 select2 添加到下拉选择后，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 插件的选择选项时，它可以工作。

任何人都可以帮助解决这个问题？

【问题讨论】：

标签： laravel jquery-select2 laravel-livewire

【解决方案1】：

首先在您的 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>

【讨论】：