Laravel Livewire组件中Select2下拉框不显示选项问题求助

1. 修正Blade模板配置 #

1.1 正确添加wire:ignore属性 #

你之前添加wire:ignore不生效大概率是位置错误，需要给两个选择器的外层父容器加该属性，避免Livewire重绘DOM时冲掉Select2动态生成的结构：

<!-- 分类选择器外层加wire:ignore -->
<div class="form-group col-lg-6" wire:ignore>
    <label class="h5">Product Category <sup class="text-danger">*</sup>|<button type="button"
            id="new-category" class="btn btn-light ">+</button></label>
    <select required class="form-control" wire:model="product_category_id" id="categories_edit">
        <option value=""></option>
        @foreach ($categories as $category)
        <option {{ $product->product_category_id === $category->id ? 'selected' :'' }}
            value="{{ $category->id }}">{{ $category->title }}</option>
        @endforeach
    </select>
</div>
@error('product_brand_id')
<span class="text-danger error">{{ $message }}</span>
@enderror
<!-- 品牌选择器外层加wire:ignore -->
<div class="form-group col-lg-6" wire:ignore>
    <label class="h5">Product Brand <sup class="text-danger">*</sup>| <button type="button" id="new-brand"
            class="btn btn-light">+</button></label>
    <select class="form-control" wire:model="product_brand_id" id="brands_edit">
        @foreach ($brands as $brand)
        <option {{ $product->product_brand_id === $brand->id ? 'selected' :'' }} value="{{ $brand->id }}">
            {{ $brand->title }}
        </option>
        @endforeach
    </select>
</div>
@error('product_category_id')
<span class="text-danger error">{{ $message }}</span>
@enderror

1.2 修正JS初始化逻辑 #

你现有代码重复初始化Select2会导致选项被清空，替换@push('js')内的所有JS代码：

<script>
$(document).ready(function() {
    // 仅初始化一次Select2
    const categorySelect = $('#categories_edit').select2({
        placeholder: 'Select an option',
        allowClear: true
    });
    const brandSelect = $('#brands_edit').select2({
        placeholder: 'Select an option',
        allowClear: true
    });

    // 选择结果同步到Livewire属性
    categorySelect.on('change', function (e) {
        @this.set('product_category_id', $(this).val());
    });
    brandSelect.on('change', function (e) {
        @this.set('product_brand_id', $(this).val());
    });
});
</script>

2. 修正Livewire组件代码错误 #

你现有组件存在两处逻辑错误，会导致数据加载/提交异常：

• 错误使用Product::get()获取单条记录，该方法返回集合而非单条模型
• 未定义验证规则就调用validate()方法，会直接抛出错误

<?php

namespace App\Http\Livewire\Components\MemberArea\Product;

use App\Models\ProductBrand;
use App\Models\ProductCategory;
use App\Models\Product;
use Livewire\Component;

class UpdateProductBrand extends Component
{
    public $product_id;
    public $product_category_id;
    public $product_brand_id, $categories, $brands, $product;
    
    // 补上验证规则
    protected $rules = [
        'product_category_id' => 'required|exists:product_categories,id',
        'product_brand_id' => 'required|exists:product_brands,id',
    ];

    public function render()
    {
        return view('pages.products.components.update-product-brand');
    }

    public function mount()
    {
        // 修正单条记录查询逻辑
        $this->product = Product::findOrFail($this->product_id);
        $this->categories = ProductCategory::all();
        $this->brands = ProductBrand::all();
        $this->product_category_id = $this->product->product_category_id;
        // 补上品牌初始值赋值
        $this->product_brand_id = $this->product->product_brand_id;
    }

    public function submit()
    {
        $data = $this->validate();
        // 修正更新逻辑
        $this->product->update($data);
        session()->flash('message', 'Brand Details Updated Successfully.');
    }
}

3. 兜底排查点 #

• 确认页面已按顺序引入jQuery、Select2的CSS和JS文件，避免$ is not defined类报错
• 清除Laravel视图缓存：执行php artisan view:clear后刷新浏览器

内容的提问来源于stack exchange，提问作者Supun Madhushanka