问题描述
我的代码有问题，select2 在我刷新页面时只显示一次，但在我提交表单时它会消失，或者如果出现验证错误，它也会消失。我试过 wire:ignore select2 没有消失，但它停止正常工作，并且表单认为它不存在。 我使用 laravel 8、livewire 2 和 turbolinks。任何帮助将不胜感激我已经被困了近 2 周。 这是我的代码：
刀片：
<form wire:submit.prevent="submit">
{{ csrf_field() }}
<div class="form-group row">
<label for="to" class="col-form-label col-md-1">à :</label>
<div class="col-md-11" >
<select class="form-control mul-select" wire:model.lazy="id_to" name="id_to[]" multiple="multiple">
<option value="test@gmail.com">test@gmail.com</option>
<option value="test5@gmail.com">test5@gmail.com</option>
</select>
<div class="text-danger">
@error('id_to')
<span>
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
<div class="form-group row">
<label for="cc" class="col-form-label col-md-1">Cc :</label>
<div class="col-md-11">
<input type="text" class="form-control" wire:model.lazy="cc" name="cc" placeholder="Cc">
<div class="text-danger">
@error('cc')
<span>
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
<div class="form-group row">
<label for="sujet" class="col-form-label col-md-1">Sujet :</label>
<div class="col-md-11">
<input type="text" class="form-control" wire:model.lazy="sujet" name="sujet" placeholder="Sujet">
<div class="text-danger">
@error('sujet')
<span>
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
<div class="form-group row">
<label for="message" class="col-form-label col-md-1">Message :</label>
<div class="col-md-11">
<textarea class="form-control" name="message" wire:model.lazy="message" rows="8"></textarea>
<div class="text-danger">
@error('message')
<span>
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
{{-- <div class="email-editor">
<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor" wire:model.lazy="message"></textarea>
<div class="text-danger">
@error('message')
<span>
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div> --}}
<div class="email-action mt-3">
<button class="btn btn-primary" type="submit">Envoyer</button>
<button class="btn btn-warning" wire:click="resetForm">Reset</button>
</div>
</form>
<script type="text/javascript">
document.addEventListener("livewire:load",function (event) {
$(document).ready(function() {
$('.mul-select').select2();
});
});
</script>
组件：
public $id_to,$id_from,$sujet,$cc,$message;
public $rules=[
'id_to' => 'required','id_from' => '','cc' => '','sujet' => 'required|max:30','message' => 'required|max:155',];
public function render()
{
return view('livewire.admin.messages.messages');
}
public function submit()
{
$validateData=$this->validate();
$to_email=User::where('email',$validateData['id_to'])->first();
Mail::send(array(),array(),function ($message) {
$validateData=$this->validate();
$emails=$validateData['id_to'];
foreach($emails as $email)
{
$message->to($email)
->subject($validateData['sujet'])
->from(Auth::user()->email,'ADMIN')
->setBody($validateData['message']);
}
});
$validateData['id_from']=Auth::user()->id;
$validateData['id_to']= implode(",",$to_email->id);
SendMessage::create($validateData);
session()->flash('success','data has been sent successfully');
$this->resetForm();
}
public function resetForm()
{
$this->id_to = '';
$this->cc = '';
$this->sujet = '';
$this->message = '';
}
解决方法
这是实现这一目标的简单方法
<div class="col-md-11">
<div wire:ignore> // this will make sure to ignore DOM changes
<select
class="form-control"
id="mul-select"
name="id_to[]"
multiple="multiple"
>
<option value="test@gmail.com">test@gmail.com</option>
<option value="test5@gmail.com">test5@gmail.com</option>
</select>
</div>
<div class="text-danger">
@error('id_to')
<span>
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
然后在组件根标记之外确保将此脚本推送到您的布局
@push('scripts')
<script>
$(document).ready(function () {
$('#mul-select').select2();
$(document).on('change','#mul-select',function (e) {
//when ever the value of changes this will update your PHP variable
@this.set('id_to',e.target.value);
});
});
</script>
@endpush
最后，在您的布局文件中，在关闭 body 标签之前，像这样附加推送的脚本
@stack('scripts')
</body
通常对于 Livewire 中的 select2，我使用 hydration 来重新渲染元素。
<div class="form-group row" wire:ignore.self> // I'm not sure about this it's necessary
<label for="to" class="col-form-label col-md-1">à :</label>
<div class="col-md-11" >
<select class="form-control mul-select" wire:model.lazy="id_to" name="id_to[]" multiple="multiple">
<option value="test@gmail.com">test@gmail.com</option>
<option value="test5@gmail.com">test5@gmail.com</option>
</select>
<div class="text-danger">
@error('id_to') <span><strong>{{ $message }}</strong></span> @enderror
</div>
</div>
</div>
//......
<script>
$(document).ready(function() {
window.initSelectDrop=()=>{
$('.mul-select').select2({
placeholder: '{{ __('locale.Select') }}',allowClear: true});
}
initSelectDrop();
$('.mul-select').on('change',function (e) {
livewire.emit('selectedCompanyItem',e.target.value)
});
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
</script>
在组件中
public function hydrate()
{
$this->emit('select2');
}
protected $listeners = [
'selectedCompanyItem'
];
public function selectedCompanyItem($value)
{
dd($value);
}