我想要实现的是，有两个模型 A 和 B，它们之间的关系是一对多，其中 A 有多条 B。因此，如果已经创建了 A 和 B 的记录，则可以将 A 分配给多条 B。因此，我使用 livewire 开始了当前项目，现在我不知所措。常规的多个 select 工作正常，并填充了 livewire 后端的数组。但是当我使用 select2 时，数组中没有存储任何内容，当我添加它时，它显示一个空数组。 尽管 livewire 提供了一套很棒的工具，但我开始意识到有很多灰色区域，缺少一些东西或缺乏外部支持，比如这里的 select2。

这是我到目前为止所做的：

<div>
<div class="tab-pane fade show active" id="card1" role="tabpanel" aria-labelledby="card1-tab">
    <div class="pt-3"></div>
    <div class="row" >
        <div class="form-group col">
            <label for="cards">Enter Cards</label>
            <select class="form-control select2" id="cards" multiple="multiple" onchange="this.dispatchEvent(new InputEvent('input'))>
                <option disabled="">Select Cards</option>
                @foreach($cardsUnassigned as $card)
                    <option value="{{ $card->id }}">{{ $card->imei_number }}</option>
                @endforeach
            </select>
        </div>
        
        <div class="form-group col">
            <label for="technicians" class="">Technicians</label>
            <select class="form-control select2" id="technicians" wire:model='techies.'>
                <option disabled="">Select Technicians</option>
                @foreach($technicians as $tech)
                    <option value="{{ $tech->id }}">{{ $tech->first_name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    @foreach($cardSelect as $key => $value)
        {{$value}}     
    @endforeach
    <button wire:click="assignCardToTech()" class="btn btn-primary">Submit</button>
</div>
</div>

@push('scripts')

<script>
    
        $('#cards').select2({
            placeholder: 'Select Cards to assign'
        });
        //send data to livewire
        $('#technicians').select2({
            placeholder: 'Select Technicians'
        });

</script>

@endpush

以及后端：

<?php

namespace App\Http\Livewire\Stock\Assigns;

use App\Models\Card;
use App\Models\Sim;
use App\Models\Technician;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Support\Facades\Auth;

class Assigns extends Component
{

    public $sortBy_card = 'imei_number';
    public $sortBy_sim = 'ip';
    public $sortDirection = 'asc';
    public $search = '';
    public $perPage = 10;

    public $cardSelect = [];
    public $techies;

    public function render()
    {

        $simsUnassigned = Sim::query()
        ->whereNull('technician_id')
        ->searchUnassigned($this->search)
        ->get();

        $cardsUnassigned = Card::query()
        ->whereNull('technician_id')
        ->searchUnassignedCard($this->search)
        ->get();
        // dd($cardsUnassigned);

        $simsAssigned = Sim::query()
        ->searchAssigned($this->search)
        ->orderBy($this->sortBy_sim, $this->sortDirection)
        ->paginate($this->perPage);

        $cardsAssigned = Card::query()
        ->searchAssignedCard($this->search)
        ->orderBy($this->sortBy_card, $this->sortDirection)
        ->paginate($this->perPage);

        $technicians = Technician::query()->get();

        return view('livewire.stock.assigns.assigns',compact('simsUnassigned','cardsUnassigned','simsAssigned','cardsAssigned','technicians'))
        ->extends('layouts.base')
        ->section('content');
    }

    public function assignCardToTech(){
        dd($this->cardSelect);
        if($this->cards){
            foreach($this->cards as $card){

            }
        }
    }
}

希望这能有所帮助。