Question

在将 select2 插件添加到选择选项后，Laravel Livewire 搜索不起作用

2021-01-05

2051

laravel jquery-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,
            ]);
        
    }
}

这是 blade 中的选择选项

$('#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>

我想检索与选定图库相关的所有相册。但是当选择一个图库时，它不会搜索。但是当使用没有 select2 插件的选择选项时，它可以工作。

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

Answer 1

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

之后，您必须在 blade 和 jquery 中进行以下更改：

Blade：

<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>