gpt4 book ai didi

laravel - 如何在 livewire 中使用 select2 多选

转载 作者:行者123 更新时间:2023-12-04 12:56:23 27 4
gpt4 key购买 nike

我想要实现的是,有两个模型 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 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){

}
}
}
}
希望这会有所帮助。

最佳答案

######## 带电组件内部

public array $locationUsers = [];
protected $listeners = ['locationUsersSelected'];

public function locationUsersSelected($locationUsersValues)
{
$this->locationUsers = $locationUsersValues;
}
######## 带电 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>
######## 内部带电脚本
document.addEventListener('livewire:load', function () {
$('#locationUsers').on('select2:close', (e) => {
@this.emit('locationUsersSelected', $('#locationUsers').select2('val'));
});

$('#locationUsers').val(@this.get('locationUsers')).trigger('change');
});

关于laravel - 如何在 livewire 中使用 select2 多选,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66545975/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com