Laravel Livewire和Select2内部的bootstrap模式

Question

我有一个模态，我使用一个select2下拉菜单。我已经为我的select2构建了一个laravel blade组件，它基本上处理select2上的更改事件，并使用@this.set(myVar, $(select2).val());直接设置livewire中的变量。这在正常情况下工作得很好，我只是想立即保存值，但在我想使用一个模态与提交按钮和使用wire:model.defer的情况下，它继续并设置值立即改变事件被触发，然后当模态被提交，它只是看到原来的值，而不是新选择的一个。

我的第一个想法是用存储所选值的livewire组件变量的值覆盖提交的表单值，并将其放在表单中。我似乎找不到一个好的方法来做到这一点，因为我认为从用户体验的角度来看，这是一种糟糕的形式，而且在正常情况下没有多大意义。

另一种选择是直接绕过验证并使用变量值，但我担心有人可以使用开发工具修改dom并提交他们想要的任何值。

有没有人得到一个select2下拉下拉工作在livewire?我希望看到一个很好的实现，因为我的是缺乏的。

我包括我的相当hackish select2叶片组件，目前只是返回false当它从一个模态提交，因为我正在工作的一个解决方案。

我希望能够在模态(或其他地方)使用提交按钮提交，基本上任何时候我使用wire:model.defer。

基于文档，@entangle将是一种可能的方法来做到这一点，但我不确定如何以任何其他方式实现它，而不是使用他们给出的那种显示/隐藏示例的单击事件。如果我将此添加到select2刀片组件声明中，我如何将其用于change.select2事件:

x-data="{ selectedValue: @entangle($id) }"

似乎我需要在我的javascript中引用这个(见下文)，但它不起作用。

@props(['id', 'usePlaceholder' => null, 'isDisabled' => null])
<div wire:ignore style="width:100%;" id="select2-{{ $id }}">
<select {{ $attributes }} id="{{ $id }}" name="{{ $id }}[]" class="form-select select2" data-width="100%" data-select2-id="{{ $id }}" @if ($isDisabled) disabled @endif>
@if ($usePlaceholder)
<option></option>
@endif
{{ $slot }}
</select>
</div>
{{-- blade-formatter-disable --}}
@push('custom-scripts')
<script defer>
$(document).ready(function() {    
let select2 = $('#' + @js($id));

select2.select2({
dropdownParent: $('#select2-' + @js($id)),
placeholder: 'Select an option',
minimumResultsForSearch: 15
});

select2.on('change.select2', function() {
let classes = document.getElementById(@js($id)).classList;
if(classes.contains('dynamic-array')) {
let arr = @js($id).split('-');
if(arr.length === 3) {
let arrayName = arr[0] + '.' + arr[1] + '.' + arr[2];
@this.set(arrayName, $(select2).val());
} else {
let arrayName = arr[0] + '.' + arr[1];
@this.set(arrayName, $(select2).val());
}

@this.set(arrayName, $(select2).val());
} else if(classes.contains('component')){
let arr = @js($id).split('-');
let variableName = arr.at(-1);
@this.set(variableName, $(select2).val());
} else if (classes.contains('modal')) {
selectedValue = $(select2).val();  <--not sure how to set this to use with entangle?
return false;
}
else {
@this.set(@js($id), $(select2).val());
}
});
window.addEventListener('set'+@js(ucfirst($id)), event => {
select2.val(event.detail).trigger('change');
});
});
</script>
@endpush

Answer 1

我最终只允许我的select2在变化时设置值，然后我使用更新的生命周期钩子来验证那个点的值:

public function updatedClientId($value)
{
Validator::make(['clientId' => $value], [
'clientId' => ['required', 'integer', 'exists:clients,id']
])->validate();
}
}

那么当我提交表单时，我没有验证下的字段，当保存到数据库时，我只使用$this->clientId。这似乎工作，并显示一个错误消息，如果有人试图搞乱dom和提交一个无效的值。

Answer 2

您可以考虑使用以下两种方法:

1 -使用线:忽略。一个简单的例子:

<div wire:ignore style="width:100%;">
<select wire:model.defer="name">
<option></option>
<option value="value1">Name 1</option>
<option value="value2">Name 2</option>
</select>
</div>
<script>
$("#selectValue").select2();
$("#selectValue").change(function(e) {
//passing true as the third parameter to defer
@this.set('name', $(this).val(), true)
})
</script>

2 -使用livewire:update event

<div style="width:100%;">
<select wire:model.defer="name">
<option></option>
<option value="value1">Name 1</option>
<option value="value2">Name 2</option>
</select>
</div>
<script>
$("#selectValue").select2();
document.addEventListener('livewire:update', function (event) {
$("#selectValue").select2();
});

$("#selectValue").change(function(e) {
//passing true as the third parameter to defer
@this.set('name', $(this).val(), true)
})
</script>