我在 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">×</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>
在组件中
public function create()
{
//...create
$this->dispatchBrowserEvent('closeModal');
}
以及刀片脚本部分
<script>
window.addEventListener('closeModal', event=> {
$('#modal-create').modal('hide')
})
在大多数情况下,您只需将模态代码包装在基于 Livewire 属性的刀片中
@if($openModal)
。然后触发属性的更改,例如<button wire:click="$set('openModal', false)">...</button>
。这样您就可以利用 Livewire 的力量。
使用
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">
...
最好的方法是将形式与另一个内部组件的折叠分开