Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
11. Event basics

Episodes

0%
Your progress
  • Total: 2h 52m
  • Played: 0m
  • Remaining: 2h 52m
Join or sign in to track your progress

Transcript

00:00
So events in LiveWire are incredibly powerful. And the main reason that we use these is to communicate between components. Now, we can communicate between LiveWire components,
00:11
or we can even dispatch and listen for events on the client side as well. That means that we can basically get our components talking to each other, whether we trigger these
00:21
from our LiveWire components, or whether we just trigger these from within JavaScript. Now, we're going to take this episode just to take a look at some event basics.
00:29
So we've got a really good understanding of how these work. And then we're going to tie this into the application that we're building by separating out
00:35
our form into a new component so we can listen within our main component and refresh this list of books. So let's go and just create out a really simple example
00:46
component here. And let's use LiveWire make. And we'll create out a event example component. OK, so we've already seen that.
00:56
I'm going to head straight over to the dashboard. I'm just going to put this directly in here. So let's say LiveWire event example. OK, so the basics of events is that we dispatch
01:08
and we listen to events. So let's go and just open up our event example component here. And I'm going to go ahead and create a button just to dispatch an event.
01:20
Now, with this button, we're going to go ahead and call a method. So we're going to say, when we click on this, let's just call this dispatch some event.
01:30
And then we can, of course, go ahead and create this over in this event example. So let's create that method out in here. And there we go.
01:39
Now, to dispatch an event, we just use this dispatch. That's pretty much all we need to do. So what this will do is it will dispatch an event. And we can potentially listen to the event
01:51
that we've dispatched from any of our components or, like I mentioned before, on the client side. Now, this takes in, at minimum, an event name. So let's just say example event.
02:02
And that's pretty much it. So if we head over to here and click Dispatch Event, nothing has really happened because we're not listening to this event anywhere.
02:10
Eventually, this event will be something like a book has been created. So it might be book.created or book-created. Now, how do we listen to this event?
02:19
Well, let's just listen to this directly within this component. And then we'll look at listening to this from another component. So what I'm going to do is create our method.
02:28
First of all, that's the fundamental thing that we need to do, create a method that's going to perform an action when this event happens. So let's go and create a method, do something in here.
02:40
So I want this to happen. So we'll just say something. I want this to happen when this is dispatched. How do we do this?
02:50
Well, again, we're going to bring in attributes here. There's a couple of ways to do this in LiveWire, but it's much more convenient to do this with attributes. So we're going to go ahead and bring in a PHP attribute here.
03:00
And we're going to use the on attribute from LiveWire. See, this comes from LiveWire attributes. So we go ahead and we use this attribute. And then in here, you probably guessed, and as you can see,
03:11
we give the event name. So that is example-event. So let's go ahead and say example-event. So that is pretty much it.
03:20
We've set up a kind of communication here. When we click on a button, which calls this method, we dispatch an event, and we're listening for this event inside of here.
03:30
So let's try this out. Let's go over, hit Dispatch Event, and there we go. So what's happened here is that event's been dispatched, that has listened, and it has done something.
03:39
So how is this kind of thing useful? Well, it's useful when you have multiple components, but you need them to listen to what other components are doing.
03:48
So let's look at our example here. If we were to separate this form out into a completely new component, which would be a good idea to keep it nice and separate
03:56
from anything else we have, once we've created that book, what we can then do is dispatch an event to tell this component that a new book has been created. What that then means is we could just
04:08
refresh this list of books once we know that a new book has been created. We could flash a message somewhere if we wanted to. There's a bunch of different things that we can do,
04:17
and we'll be looking at an example of that later using AlpineJS. So let's go ahead and look at listening to an event from another component
04:25
just to see that this works. Then I'm just going to tinker around in the browser console just to show you this, and then we should pretty much be wrapped up with the basics of events.
04:36
So I'm going to take this event listener that we've implemented here, and I'm going to move this over to another component. It doesn't matter which component it is.
04:43
All components, as long as you apply this listener, will actually listen for this event. So we're dispatching this event from this event example component.
04:51
Let's add this to our book index. I'm just going to put this method directly in here. And of course, just make sure we put in the on attribute just over here.
05:00
OK, so this completely separate component is now listening for this event, and we shouldn't see any difference whatsoever. So if I click on this, there we go.
05:09
So component communication between each other by events. That's pretty much what we need to know. So I'm going to go ahead and get rid of this here and put it back into our example event
05:19
just so we've got it as a reference. And now that we've grasped the basics of events, let's take a look at this from the client side. So we know that when we click on this button,
05:28
that goes ahead and dispatches that event, and we have a method that's listening for that event. But we can actually do this from the client side as well. Remember that Alpine is being used with Livewire,
05:38
and also Livewire has a global object. So what we can do is if we were to create out an Alpine component on the page, we could either listen for events globally,
05:48
or we could dispatch events globally using the Livewire global object. So how do we do this? Well, let's go ahead and just type into the console
05:55
here Livewire.dispatch. And I'm going to go ahead and call this like we would within a component itself. We're not actually doing this within a PHP component.
06:05
We're doing this within JavaScript, but this is still going to work. So let's just double check what that event was called, example event.
06:12
So I'm going to go ahead and say example event. And when I go ahead and run this code, our components are still going to pick this up, despite the fact we're triggering
06:20
this from the client side. And don't worry about this 500 error. That's just because we're dying and dumping. But you can see this still works.
06:28
So events are incredibly powerful in Livewire. Basically, this means that we can just dispatch events, listen to them, and have communication between different components, both on the client side
06:40
and on the back end as well. So now that we've done this, let's head over to the next episode and get this added into a real usage for dispatching and listening to events.

Episode summary

In this episode, we dive into the basics of working with events in Livewire and why they're so useful. You'll see how events make it easy for your Livewire components to communicate with each other or even with the client-side (JavaScript) code. We start with a simple event example component where we create a button to dispatch an event and a method to respond when that event fires.

You'll see step-by-step how to set up the dispatcher and listener, use Livewire's on-attribute, and how these events allow one component to react when things happen in another component. We also talk through a practical scenario—splitting out a form into its own component and using events to refresh a list on the main component after submitting the form.

To round things out, we check out how these events are accessible on the client side, thanks to Alpine.js and the Livewire global JavaScript object. You'll learn how you can dispatch events from your browser console and have your Livewire components react, showing just how flexible this event system really is!

By the end of this video, you'll have a solid understanding of how to dispatch and listen for events, setting you up for more interactive and modular Livewire applications.

Episode discussion

No comments, yet. Be the first!