Reacting on events / changes from Livewire

[poutena]

Hello,

I'm trying to implement something like this with Livewire and Alpine:

1 - There's a window which lists notes, and each note has a "edit" and "delete" button
2 - On clicking "edit", the "edit" and "delete" buttons are hidden, and a textfield with the buttons "cancel" and "save changes" is displayed (using Alpine)
3 - On clicking "save changes", the note is updated (through Livewire)

So far, so good. However, I want to make it so that, if the note is successfully updated, the edit elements are closed (i.e., the actions on 2) are reverted), and I just can't seem to make it work.

I've tried making Livewire emit a "hide textfields" event and catch it through Alpine, and I've tried using entangle to access a "show textfield" variable on Livewire, the value of which I could set after a successful update. I couldn't get either of these approaches to work.

My first question would be: what would be the best / recommended way to implement something like this? Once I'm confident on the approach I should take, and if I still can't get it to work, I'll post the code I'm using.

Thanks in advance!

---

EDIT: To make things easier, I'll focus on events for now.

So I have a Note Livewire component. There I have a updateNote() function, which ends with a $this->emit('closeNotes');. Then on the page's Javascript I have:

Livewire.on('closeNotes', (message, component) => {
    console.log('close notes triggered');
});

This console.log() gets triggered, so I would assume things are working as intended, so far.
My first question would be: can this closeNotes event be caught directly by Alpine? Or do I have to trigger it after having Livewire catch it? Something like:

Livewire.on('closeNotes', (message, component) => {
    $('.note-container').trigger('close-notes');
});

[Lomacar]

Are you remembering to say @hide-textfields.window on the element you want to update?

[poutena]

I did not, as I didn't know it was necessary. Anyway, I suppose it's harder to help in a subjective "what's the best way to do it?" situation, so I'm going to add some of the code I used in a follow-up post. EDIT: I updated the original question instead

[Lomacar]

OK. I don't know anything about Livewire, but if closeNotes is a global event then you should be able to catch it on an Alpine element with @closeNotes.window="\\code here". Although I am not sure about capital letters on event names. Otherwise your suggested way of triggering it should work. Didn't you try it?

[Lomacar]

Oh, I mean with your suggested way you would still need @close-notes, but you wouldn't meed .window since you are triggering the element directly.