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

Posted 2023-05-07

【中文标题】添加 select2 插件以选择选项后。 Laravel Livewire 搜索不起作用

【英文标题】：after adding select2 plugin to select option . Laravel Livewire search not working

【发布时间】：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 插件的选择选项时，它可以工作。

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

【参考方案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>