This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Already a member? Sign in to continue

Playing

08. Listening to events with Alpine

Transcript

00:00

you've probably noticed that when we post a reply to a comment and hit reply, sure enough that gets stored in the database but we don't see this toggled off. So let's fix that up now with an

00:14

event from Livewire which we can pick up in Alpine. Okay so let's go over to where we are actually replying. The first thing that we're going to do is dispatch this event. Let's go ahead and call the dispatch method on this component. Let's give this a name. We'll just call this replied for now. Now optionally we can pass through any arguments to this so we might at some point need the comment

00:38

that was replied to. For example if we want to flash a message. So let's pass that in now even if we don't need to. We could also go ahead and use an array here to give the reply as well if we need it. Okay so now that we are dispatching an event, once we create a reply this will be dispatched and we can pick it up using Alpine. If we head over to the comment item component

01:01

let's go up to the top where we have our state. From here we can say x on and then we can give the name of the event. So let's say replied. Now because this is an event and we need to pick it up on the global window object we need to use the window modifier. Once this event comes through we can just access any of the data that we're storing in this component and set it

01:24

to whatever we need. So we're always going to assume that when we are replying we just want to set replying back to false. So that will toggle the state off. Let's go over to the browser and check this out. Okay so I'm going to say a new reply. Hit reply and yeah there we go. Our replying state is now toggled off.

18 episodes•1 hr 40 mins•3 months ago

Overview

Build a drop-in comment system with Livewire that instantly works for any model.

We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually.

Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.

Sign up to access "Build a Livewire Comment System" right now.

Episodes

Transcript

Overview

Comments