有沒有辦法收聽laravel livewire 生命周期鉤子？例如...
在 php 中是：
public function updatedFoo($value)
{
//
}
它如何在 js 中（我知道使用@this生成 id 查找器）？
window.Livewire.find('componentIdGenerated').on('updatedFoo', function(value) {
//
});
多謝！
uj5u.com熱心網友回復：
這是可能的，真的很酷。正如檔案所說，有一些相關的 JavaScript 鉤子，比如
<script>
document.addEventListener("DOMContentLoaded", () => {
....
Livewire.hook('message.sent', (message, component) => {})
Livewire.hook('message.failed', (message, component) => {})
Livewire.hook('message.received', (message, component) => {})
Livewire.hook('message.processed', (message, component) => {})
});
</script>
比方說，你呼叫了一些方法，使用它你可以獲得訊息鉤子并進行適當的操作
<script>
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('message.sent', (message,component) => {
if (message.updateQueue[0].payload.method === 'openModal') {
// message was sent
}
Livewire.hook('message.received', (message,component) => {
if (message.updateQueue[0].payload.method === 'openModal') {
// message was received
}
// and go on!
</script>
你也可以在事件發生時收聽并做同樣的事情
<script>
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('message.sent', (message,component) => {
if (message.updateQueue[0].payload.event === 'someDispatchedEvent') {
// message was sent
}
Livewire.hook('message.received', (message,component) => {
if (message.updateQueue[0].payload.event === 'someDispatchedEvent') {
// message was received
}
// and go on!
</script>
希望你能更多地利用這一點，向我們展示你的進展！;-)
uj5u.com熱心網友回復：
感謝@Prospero 提供第一步和關于必要代碼的總體思路
首先我們需要保存我們屬性的初始狀態（在我的例子中是一個模態組件，id 是動態的）：
括號內的變數為刀片變數）
...
@php
$id = $id ?? \Illuminate\Support\Str::random(15);
$model = $attributes->wire('model')->value()
@endphp
...
<script wire:ignore>
var model{{ $id }};
document.addEventListener("livewire:load", function(event) {
model{{ $id }} = @this.{{ $model }};
});
</script>
然后，使用 livewire 鉤子，您必須監聽 element.updated 事件，并將初始狀態與 livewire 屬性的新狀態進行比較
我只使用條件比較，我看到你可以使用代理來獲得干凈的代碼：
<script wire:ignore>
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('element.updated', (el, component) => {
if(model{{ $id }} && !@this.{{ $model }})
new bootstrap.Modal(document.getElementById('{{ $id }}')).hide();
if(!model{{ $id }} && @this.{{ $model }})
new bootstrap.Modal(document.getElementById('{{ $id }}')).show();
model{{ $id }} = @this.{{ $model }};
});
});
</script>
我用它來打開一個引導模式刀片組件組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390065.html