Laravel Livewire部署后Dropdown筛选失效问题求助

问题说明 #

部署Laravel Livewire项目后，Program Studi下拉框无法根据选中的Jurusan筛选显示对应选项，下拉框为空；但本地开发环境中功能正常。

相关代码 #

控制器（app/Livewire/Matakuliah.php） #

return view('livewire.matakuliah', [
    'title' => 'Mata Kuliah',
    'matakuliahs' => $matakuliahs,
    'jurusans' => Jurusan::all(),
    'prodis' => ProgramStudi::where('jurusan_id', $this->jurusan_id)->get(),
]);

视图（resource/views/livewire/matakuliahModal.blade.php） #

<div class="form-group mb-3">
    <label for="jurusan_id" class="fs_caption4">Jurusan</label>
    <select class="form-select @error('jurusan_id') is-invalid @enderror select2-add"
        id="jurusan_id" name="jurusan_id" wire:model.live="jurusan_id" style="width: 100%">
        <option value="">-Pilih Jurusan-</option>
        @if (Auth::user()->role->id == 4)
            @foreach ($jurusans as $jurusan)
                @if ($jurusan->id == Auth::user()->jurusan_id)
                    <option value="{{ $jurusan->id }}">{{ $jurusan->nama_jurusan }}</option>
                @endif
            @endforeach
        @else
            @foreach ($jurusans as $jurusan)
                <option value="{{ $jurusan->id }}">{{ $jurusan->nama_jurusan }}</option>
            @endforeach
        @endif
    </select>
    @error('jurusan_id')
        <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>
<div class="form-group">
    <label for="program_studi_id" class="fs_caption4">Program Studi</label>
    <select class="form-select @error('program_studi_id') is-invalid @enderror select2-add"
        id="program_studi_id" name="program_studi_id" wire:model.live="program_studi_id"
        style="width: 100%" data-placeholder="-Pilih Program Studi-">
        <option value="">-Pilih Program Studi-</option>
        @if (Auth::user()->role->id == 4)
            @foreach ($prodis as $prodi)
                @if ($prodi->id == Auth::user()->program_studi_id)
                    <option value="{{ $prodi->id }}">{{ $prodi->nama_prodi }}</option>
                @endif
            @endforeach
        @else
            @foreach ($prodis as $prodi)
                <option value="{{ $prodi->id }}">{{ $prodi->nama_prodi }}</option>
            @endforeach
        @endif
    </select>
    @error('program_studi_id')
        <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>

解决方案 #

1. 清除部署环境缓存 #

部署后缓存未清理是常见问题，执行以下命令清除各类缓存：

php artisan cache:clear
php artisan config:clear
php artisan view:clear
php artisan route:clear
php artisan livewire:clear

2. 优化组件数据加载逻辑 #

当前在render方法中直接传递prodis，建议添加属性更新监听方法，确保jurusan_id变化时实时刷新prodis数据：
在Matakuliah.php组件中添加：

public $jurusan_id = '';
public $prodis = [];

public function mount()
{
    // 初始化加载默认数据（根据用户权限调整）
    if(Auth::user()->role->id == 4) {
        $this->jurusan_id = Auth::user()->jurusan_id;
        $this->prodis = ProgramStudi::where('jurusan_id', $this->jurusan_id)->get();
    }
}

public function updatedJurusanId()
{
    $this->prodis = ProgramStudi::where('jurusan_id', $this->jurusan_id)->get();
}

然后修改render方法，将prodis从组件属性传递：

return view('livewire.matakuliah', [
    'title' => 'Mata Kuliah',
    'matakuliahs' => $matakuliahs,
    'jurusans' => Jurusan::all(),
    'prodis' => $this->prodis,
]);

3. 解决Select2与Livewire的DOM冲突 #

由于使用了Select2插件，Livewire更新DOM后Select2未重新初始化，导致下拉框不显示新数据。在视图底部添加以下脚本：

<script>
document.addEventListener('livewire:update', function() {
    $('.select2-add').select2({
        placeholder: '-Pilih-',
        allowClear: true
    });
});
</script>

确保页面已正确引入Select2的CSS和JS文件。

4. 验证数据库与权限数据 #

• 确认部署服务器数据库中，ProgramStudi表的jurusan_id与Jurusan表数据关联正确，不存在数据缺失
• 检查当前登录用户的role->id、jurusan_id、program_studi_id字段值是否正确，避免权限判断逻辑过滤掉所有选项

内容的提问来源于stack exchange，提问作者Raider Boy