未触发 Livewire 发射
Livewire emit isn't triggered
我试图在单击编辑按钮时显示模态,所以我添加了 wire:click
:
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span class="font-medium">{{ $project->project }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $project->username }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<span class="bg-{{ $project->status_color }}-200 text-{{ $project->status_color }}-600 py-1 px-3 rounded-full text-xs"> {{ $project->status_name }} </span>
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1 px-4 rounded" wire:click="edit">
edit
</button>
</div>
</td>
</tr>
这是我的组件:
use Livewire\Component;
class Dashboard extends Component {
use WithPagination;
public function edit() {
$this->emit('eModal');
}
}
在按钮所在的 livewire blade 中,我为按钮添加了模态和脚本:
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
Livewire.on('eModal', () =>{
console.log('scsa');
$('#editModal').modal('show');
});
</script>
@endpush
我将 console.log
添加到脚本中,因此我可以查看是否触发了发射,但没有任何反应,我的控制台上什么也没有。
我试过 dispatchBrowserEvent
,但结果相同;什么都没发生。
有人可以帮助我吗?谢谢!
尝试在您的 blade 主文件中添加 livewire 事件:
<script>
Livewire.on('eModal', () =>{
console.log('scsa');
$('#editModal').modal('show');
});
</script>
我试图在单击编辑按钮时显示模态,所以我添加了 wire:click
:
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span class="font-medium">{{ $project->project }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $project->username }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<span class="bg-{{ $project->status_color }}-200 text-{{ $project->status_color }}-600 py-1 px-3 rounded-full text-xs"> {{ $project->status_name }} </span>
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1 px-4 rounded" wire:click="edit">
edit
</button>
</div>
</td>
</tr>
这是我的组件:
use Livewire\Component;
class Dashboard extends Component {
use WithPagination;
public function edit() {
$this->emit('eModal');
}
}
在按钮所在的 livewire blade 中,我为按钮添加了模态和脚本:
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
Livewire.on('eModal', () =>{
console.log('scsa');
$('#editModal').modal('show');
});
</script>
@endpush
我将 console.log
添加到脚本中,因此我可以查看是否触发了发射,但没有任何反应,我的控制台上什么也没有。
我试过 dispatchBrowserEvent
,但结果相同;什么都没发生。
有人可以帮助我吗?谢谢!
尝试在您的 blade 主文件中添加 livewire 事件:
<script>
Livewire.on('eModal', () =>{
console.log('scsa');
$('#editModal').modal('show');
});
</script>