表单提交时引导模式关闭答案

【问题标题】：Bootstrap Modal close when form submits表单提交时引导模式关闭
【发布时间】：2021-08-02 15:07:00
【问题描述】：

我在 livewire 中有一个引导模式，我希望有一个行为，当表单提交成功但不知道该怎么做时关闭模式，我不能放置数据关闭，因为表单有验证并且用户看不到它，即使用户验证失败，也需要再次打开它。

        <div class="modal fade" tabindex="-1" id="modal-create" wire:ignore.self>
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Create FAQ</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                <form wire:submit.prevent="create">
                  <div class="form-group">
                    <label for="name">Title</label>
                    <input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror" id="title" name="title"
                    placeholder="Enter title">
                    @error('title') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                  <div class="form-group">
                    <label for="address">Short Description</label>
                    <input type="text" wire:model="description" class="form-control  @error('description') is-invalid @enderror" id="description"  name="description"
                    placeholder="Enter description">
                    @error('description') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                  <div class="form-group">
                    <label for="filter">Filter Type</label>
                    <select class="form-control @error('filter') is-invalid @enderror" wire:model="filter">
                        <option>Select one</option>
                        <option value="app">App</option>
                        <option value="card">Card</option>
                        <option value="web">Web</option>
                    </select>
                    @error('filter') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                  <div class="form-group">
                    <label for="image">Portfolio Image</label>
                    <br/>
                    <input wire:model="image" type="file" id="image" name="image">
                    @error('image') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                      <button type="button" class="btn btn-sm btn-warning mx-2" data-dismiss="modal">Cancel</button>
                      <button type="submit" class="btn btn-sm btn-success">Create</button>
                    </div>
                </div>
                </form>
                </div>
              </div>

【问题讨论】：

你用ajax提交表单了吗？

标签： laravel bootstrap-4 bootstrap-modal laravel-livewire

【解决方案1】：

在组件中

public function create()
{
   //...create
    
   $this->dispatchBrowserEvent('closeModal');
}

在刀片脚本部分

<script>
  window.addEventListener('closeModal', event=> {
     $('#modal-create').modal('hide')
  })

【讨论】：

【解决方案2】：

在大多数情况下，您只需将模式代码包装在基于 Livewire 属性的刀片 @if($openModal) 中。然后触发属性的变化，例如<button wire:click="$set('openModal', false)">...</button>。这样您就可以利用 Livewire 的强大功能。

【讨论】：

【解决方案3】：

使用

wire:model.defer

...
<input type="text" wire:model.defer="title" class="form-control @error('title') is-invalid @enderror" id="title" name="title" placeholder="Enter title">
...

【讨论】：