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
17. The magic parent action

Episodes

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

Transcript

00:00
OK, so deleting a book sounds like a pretty straightforward task. But this brings us into a couple of other things
00:06
within Livewire, mainly authorization, which is incredibly important. So we're not going to cover that in this episode. We're going to look at the functionality first.
00:15
But then we're going to talk about Livewire's security, which is incredibly important. OK, so let's head over to our book item. And we're going to add in a Delete button next
00:26
to our Edit button. So let's switch this over to Delete. And we don't quite know what we're doing here just yet. So just make sure this looks good.
00:38
Sure enough, it does. So let's go through what we've done already, which is using Events to dispatch an event to tell this book index to delete this book.
00:50
And then we'll take a look at using a parent call instead, which is a lot more efficient, requires less code. So let's go and just implement this how we might think we'd do this previously.
01:01
So we're going to say wire click and delete book. And we need to know which book we're deleting. This is going to go ahead and fire this off to our book index.
01:12
A little bit of background, when we're deleting things, we can't really delete them internally. We have to send this event over to the main book index so it knows which one to get rid of.
01:22
Well, we could pretty much do this anywhere. But we want that index to re-render without that book in there. We can't just get rid of an individual component.
01:30
So let's go ahead and say delete book. And we will pass through the book ID. So let's go over to our book item. And let's add in a method here which will handle that.
01:42
So delete book. And remember, we get the book ID into here. So with this, this is obviously going to trigger. Let's just say delete, just so we know that that works.
01:55
That works nicely. And in here, if we were to say book and book find book ID, and then book delete, that is going to actually delete the book.
02:12
But it's not going to re-render our index. Because remember, we're doing this within our book item. So let's just try this out, just so we know that it works. And then we'll see the best way that we can do this.
02:23
So when I click Delete, that's actually sent the network request across. And it has actually deleted that in the database. But of course, hasn't re-rendered the list of books.
02:32
But when we give the page a refresh, it does. So there's another way that we could do this, obviously, because we're within the context of a book here. We could just emit the book ID altogether,
02:41
and then just call this book delete. But we're going to be moving this out of here. So how are we going to do this? How would we typically do this?
02:50
Well, with an event. That's not the solution we're going to end up with. But let's just do this anyway. So this dispatch, and we'll say book deleted.
03:01
And we'll pass through the ID of the book we've deleted. Now, we're not using this within here, because we're sending this as a sort of global event to tell us which book has been deleted.
03:11
We don't necessarily need to specifically listen for this by going ahead and concatenating in the book ID. So we're dispatching an event called book deleted. We know that over on our book index,
03:21
this is where we need to actually delete the book so the list gets re-rendered. So in here, we could say on book deleted. And we could create another method out in here
03:35
called delete book. And that would be responsible at the top level for deleting the book. Remember, we get a book ID sent through.
03:44
And we could do the same thing. So book, and then find book ID. And then we could say book and delete. Now, because we're calling this method on our book index,
03:59
that would then re-render the list of books without that book in there. So let's just try this again. I'm going to delete this another book.
04:07
Sure enough, it goes. So there's a couple of things here. I'm going to mention this now. Authorization, incredibly important.
04:13
So when we're working within Livewire, anyone can dispatch an event. So anyone in your application could dispatch an event with any ID.
04:22
Just because we're working within PHP here and then rendering out these components doesn't mean that this is secure. We still need to authorize this like we
04:30
would do in a standard Laravel application without using Livewire. We're going to discuss that next. But the other thing here is that this is a little bit too much
04:40
work just to delete a book. So what we're doing is we know that we've got this child component book item. We are having to call a method, then dispatch an event.
04:50
And then over on our book item, we're having to listen to that event. And then we're having to go ahead and perform some action on that.
04:57
So what we're going to do is take a look at calling parent components, which can be incredibly helpful to clear up your code. So we're actually going to get rid of this event altogether.
05:07
We're still going to keep this method in here because that's useful at the top level with that index to delete the book and re-render the list. But we're going to get rid of this inside of here.
05:18
So how do we call, from this button, this book index delete book method? And that is where parent method calls come in, parent component method calls come in.
05:31
So we're going to get rid of this because we don't have that method locally in our book item anymore. And we're going to see how we can do this. So I said before that Livewire comes
05:39
with a bunch of magic properties which help you in terms of productivity. And this one is parent. So what we could do is say parent delete book.
05:50
And because book item is a child of our book index, that means that we can call this method directly from here. So we know that we want to pass the book ID in here. So we just pass it in.
06:01
So now, by clicking this button, we're not having to call a method within the book item component. This is completely empty with anything
06:09
to do with deleting a book. Instead, we're calling this parent component. And we're calling this delete book method, passing the book ID in, looking it up,
06:18
and deleting the book at the top level so we get that re-render. So just two steps, call a method at the parent, and we're done. So let's go over and try this out.
06:26
I'm going to delete this a book. And sure enough, you can see it works. So although the first solution is fine, and if you want to dispatch an event,
06:33
and if you need to dispatch an event, that's absolutely fine. You can do that. But in our case, we don't really need to do that. So it makes sense to just call the parent component
06:42
to delete this out. So let's go over to our Network tab, because remember, we really want to keep an eye on this. And let's just see what happens when we do delete a book
06:51
and how much markup is being re-rendered. So I've deleted that book there. And if I click on this, you can see that sure enough, we don't really have too much markup in here.
07:00
So because we've keyed these LiveWise intelligent enough to know to just get rid of that book and not re-render a huge list of books again, we have quite a small network request here.
07:11
And it's not really the end of the world. A little bit later, we're going to be introducing pagination, which will just speed this page up anyway, so we don't have this huge list of books on the page.
07:19
So there we go. A convenient way from our book item to call the parent component rather than dispatching an event when we don't need to,
07:28
and then going ahead and doing this on the book index so we can re-render that list of books once this actually gets deleted. In the next episode,
07:37
we're going to talk about something incredibly important, which is authorization, because technically anyone can pass a book ID in here and delete books that just don't belong to them.

Episode summary

In this episode, we're tackling the job of deleting a book in our Livewire app – but more importantly, we're looking at the best way to wire this up between our child and parent components (with a little bonus discussion on security coming later).

First, we try doing the delete operation right inside the child (BookItem) component. While this works — it actually deletes the book in the database — it doesn't update the parent list until a manual page refresh, which isn't ideal.

To fix this, we look at dispatching events from the child to the parent (BookIndex) component, so when a book is deleted, the parent knows to update itself. That works, but it feels a bit heavy for something as simple as deleting a book.

That's when we introduce the real star: Livewire's magic $parent functionality. Using $this->parent->deleteBook($bookId), the child component can directly call a method on its parent. This massively simplifies our code — there's no need for extra events or listeners, just a straight-up parent method call. It's super clean, and makes re-rendering the book list straightforward and efficient.

We wrap up with a quick look at how well this performs (spoiler: Livewire only re-renders what's needed), and note that next time, we really need to lock this deletion process down with proper authorization (otherwise anyone could delete any book — not good!).

So in summary: This lesson is all about calling parent component methods from a child in Livewire, making our components work together nicely and efficiently. Authorization is coming up next!

Episode discussion

No comments, yet. Be the first!