Я хочу создать несколько вариантов выбора с помощью плагина select2 в компоненте livewire, но в первый раз, когда я выбираю «onchange», мой select2 исчезает в обычной опции выбора. Я использовал провод: игнорировать, чтобы предотвратить повторную визуализацию выбранного элемента, но он все равно не работает.
Вот мой компонент лезвия.
<div wire:ignore>
<select class = "select2" name = "named[]" wire:model = "named" multiple = "multiple">
@foreach ($jobs as $job)
<option value = "{{ $job->id }}">{{ $job->name }}</option>
@endforeach
</select>
</div>
<script>
loadContactDeviceSelect2 = () => {
$('.select2').select2().on('change',function () {
var value = $(this).val();
console.info(value);
@this.dispatchTo('ticket', 'selectedItemChange',value);
});
}
loadContactDeviceSelect2();
@this.on('loadContactDeviceSelect2',()=>{
console.info('Event loadContactDeviceSelect2 triggered');
loadContactDeviceSelect2();
});
</script>
##а вот мой компонент Livewire##
class Ticket extends Component
{
public $named = [];
public $listeners = [
'selectedItemChange',
];
public function save()
{
if (is_string($this->named)) {
$this->named = explode(',', $this->named);
}
foreach ($this->named as $userId) {
DB::table('job_user')->insert([
'user_id' => $userId,
'job_id' => 2, // Assuming job_id is fixed as 2 in your case
'created_at' => Carbon::now(),
]);
}
}
public function hydrate()
{
$this->dispatch('loadContactDeviceSelect2');
}
public function selectedItemChange($value)
{
$this->named = explode(',', $value);
}
public function render()
{
$jobs = User::all();
return view('livewire.ticket', ['jobs' => $jobs]);
}
}
🤔 А знаете ли вы, что...
PHP поддерживает работу с куки для управления данными между запросами.
Это возможное решение:
вид
<div>
<div wire:ignore>
<select class = "select2"
wire:model = "named"
multiple = "multiple"
>
@foreach ($jobs as $job)
<option value = "{{ $job->id }}">{{ $job->name }}</option>
@endforeach
</select>
</div>
<script>
document.addEventListener("livewire:initialized", () => {
$(".select2").select2()
.on("change", function () {
const values = $(this).val();
console.info(values);
@this.named = values;
// @this.set("named", value); -- use this syntax to emulate wire:model.live
});
});
</script>
<div>
Класс
class Ticket extends Component
{
public $named;
public function save()
{
// ---- This is not needed: $named is already an array
// if (is_string($this->named)) {
// $this->named = explode(',', $this->named);
// }
foreach ($this->named as $userId) {
.....
}
public function render()
{
$jobs = User::all();
return view('livewire.ticket', ['jobs' => $jobs]);
}
}
Wire:model="named" достаточно для инициализации выбора, вам не нужно отправлять какое-либо событие, таким же образом, чтобы получить значение переменной $named, когда значение select2 изменяется, обработчик событий изменения, установленный в select2, равен достаточный