如何使用select2 multiselect与livewire

Question

我想要实现的是，有两个模型A和B的一对多的关系，其中A有许多B.所以如果A和B的记录已经创建，A可以分配给许多B.所以我开始了这个项目与livewire，现在我在一个损失。正常选择与多个工作很好，并在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 AppHttpLivewireStockAssigns;
use AppModelsCard;
use AppModelsSim;
use AppModelsTechnician;
use LivewireComponent;
use LivewireWithPagination;
use IlluminateSupportFacadesAuth;
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){
}
}
}
}

希望这对你有帮助。

Answer 1

########

LIVEWIRE内部组件

public array $locationUsers = [];
protected $listeners = ['locationUsersSelected'];
public function locationUsersSelected($locationUsersValues)
{
$this->locationUsers = $locationUsersValues;
}

######## INSIDE LIVEWIRE BLADE

<div class="col-md-12 mb-3" wire:ignore>
<label for="locationUsers">Select Users</label>
<select id="locationUsers" class="form-control select2" multiple="multiple">
<option value="">--select--</option>
@foreach($this->users as $id => $name)
<option value="{{ $id }}">{{ $name }}</option>
@endforeach
</select>
</div>

######## INSIDE LIVEWIRE SCRIPTS

document.addEventListener('livewire:load', function () {
$('#locationUsers').on('select2:close', (e) => {
@this.emit('locationUsersSelected', $('#locationUsers').select2('val'));
});
$('#locationUsers').val(@this.get('locationUsers')).trigger('change');
});

Answer 2

你可以试着把这个添加到你的html

<div class="form-group col-md-6" wire:ignore>
<label for="manager" class="mb-0 h5">Assign Managers:</label>
<select  wire:model="reporting_managers"  id="manager" class="select-2 multiple='multiple' data-placeholder="Assign Managers">
@foreach ($managers as $manager)
<option value="{{ $manager->id }}" data-name="{{ $manager->name }}">{{ $manager->name }}</option>
@endforeach
</select>
</div>

然后在javaScript部分

$('#manager').on('select2:select', function (e) {
@this.set('reporting_managers', $('#manager').select2('val'));
});
$('#manager').on('select2:unselect', function (e) {
@this.set('reporting_managers', $('#manager').select2('val'));
});

这将直接将你的选择存储在livewire的变量中，并且在渲染时不会被取消选择。