当我提交表单时，livewire 中的 Bootstrap select2 不断消失

Question

我的代码有问题，当我刷新页面时，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 = '';
}

Answer 1

这是实现这一目标的简单方法

<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

Answer 2

通常对于 Livewire 中的 select2，我使用水合作用来重新渲染元素。

<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);
}