表单提交时引导模式关闭

Question

我在 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>

Answer 1

在组件中

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

以及刀片脚本部分

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

Answer 2

在大多数情况下，您只需将模态代码包装在基于 Livewire 属性的刀片中

@if($openModal)

。然后触发属性的更改，例如

<button wire:click="$set('openModal', false)">...</button>

。这样您就可以利用 Livewire 的力量。

Answer 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">
...

Answer 4

最好的方法是将形式与另一个内部组件的折叠分开