编辑表单中的多项选择字段为空白，编辑表单中的 Select2 不会触发编辑表单中的选定值 - Laravel Livewires答案

【问题标题】：Multiple Selection field is blank in edit form, Select2 in edit form not triggering the selected values in edit form- Laravel Livewires编辑表单中的多项选择字段为空白，编辑表单中的 Select2 不会触发编辑表单中的选定值 - Laravel Livewires
【发布时间】：2021-09-13 12:31:20
【问题描述】：

我在 livewire 组件中有一个 select2。一切正常，但在我的编辑视图中，选定的选项未显示在选中的框中。当我打开下拉菜单时，它们显示为突出显示，因此数据来自后端。请检查下面的代码和输出截图，在此先感谢您的帮助。

Livewire 组件

public $home_categories = [];
public $no_of_products;

public function mount()
{
    $category = HomeCategory::all()->first();
    $this->home_categories = explode(',', $category->home_categories);
    $this->no_of_products = $category->no_of_products;
}

刀片组件：

<div class="form-group">
<label for="home_categories" class="col-md-4 control-label">Choose Category</label>
<div class="col-md-6" wire:ignore>
    <select class="select2 form-control" name="home_categories[]" multiple="multiple" wire:model="home_categories">
        @foreach ($categories as $category)
            <option value="{{$category->id}}">{{$category->name}}</option>
        @endforeach
    </select>
</div>

livewire里面的脚本：

@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2();
        $('.select2').on('change', function (e) {
            var data = $('.select2').select2("val");
            @this.set('home_categories', data);
        });
    });
</script> @endpush

【问题讨论】：

标签： laravel jquery-select2 laravel-8 laravel-livewire

【解决方案1】：

在刀片组件中使用此代码：

@if (in_array($category->id, $home_categories)) {{'selected'}} @endif

脚本、组件属性一切都只在选择选项标签中发生变化：如下代码：

<select class="select2 form-control" name="home_categories[]" multiple="multiple" wire:model="home_categories">
@foreach ($categories as $category)
    <option value="{{$category->id}}" @if (in_array($category->id, $home_categories)){{'selected'}}
    @endif>{{$category->name}}</option>
@endforeach

【讨论】：