我在 livewire 中有一个 bootstrap 模态,我想要一种行为,当表单提交成功时关闭模态,但不知道该怎么做,我不能放数据,因为表单有验证并且用户无法看到它,即使用户验证失败也需要再次打开它。
<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">×</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>
答案 0 :(得分:0)
在组件中
public function create()
{
//...create
$this->dispatchBrowserEvent('closeModal');
}
和刀片脚本部分
<script>
window.addEventListener('closeModal', event=> {
$('#modal-create').modal('hide')
})
答案 1 :(得分:0)
在大多数情况下,您只需将模态代码包装在基于 Livewire 属性的刀片 @if($openModal)
中。然后触发属性的更改,例如<button wire:click="$set('openModal', false)">...</button>
。这样您就可以利用 Livewire 的强大功能。