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
20. Detecting property updates with a lifecycle hook

Episodes

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

Transcript

00:00
with a combination of what we've already learned plus some other bits we can now look at real-time form updating and we're going to do this for the book notes for each of these books so let's get
00:11
started on just building out the ui for this and then we'll dive into how to get this to work and get this working nicely okay so the first thing i'm actually going to do is add an else here for the book to be displayed when it's editing or when it's not editing so all that's going to do is sort of toggle between this state i think that makes a little bit more sense and of course we can
00:34
cancel it by edit or we could introduce another button in there so just underneath this let's go ahead and create our a div in here with a text area that's going to be for our book we're going to call this notes and give it an id in fact we don't need the name for this we could get rid of that and let's just style this up really quickly so we'll set a width of full border same as before
00:58
border slate 300 and rounded large let's just take a look and there we go and we can just adjust the columns and rows so we could get rid of the columns and we'll just set the rows to four okay and we'll add in a placeholder in here and just say your notes for this book great okay so i'm going to add a label for accessibility and that's going to be for notes and we're going to
01:26
set a class of sr only for screen reader only and there we go so the goal here is as we are typing in here we want this to update that's it at the moment obviously doesn't there's no state in here whatsoever so how are we going to tackle this well we are going to first of all hook this up to our book form so we already know how to do that so let's go ahead and create out
01:52
a public string notes and that's of course going to be empty by default now in here we don't need notes so we could actually introduce a rule in here to say that this is nullable you might have other rules that you want to apply to this but we've got the notes in there now so now what we can do is over here hook this up with wire model so let's just do that here and we're going to say
02:15
form and notes now if we head over to our book item we've got one problem in that we don't have the form available in here there's nothing wrong with remember we have this update book contains that form there's nothing wrong with reusing the form for things outside of a particular form so we want to go ahead and bring this in so public book form we're just reusing that again and we'll
02:40
call that form and that will now hook up to that input really nicely so what we now want to do is make sure that when we type something in here we trigger something to go ahead and update these notes now we've already looked at one life cycle hook in live wire and that is the mount life cycle hook but we also have other life cycle hooks which can specifically relate to properties that we have
03:06
let's just take a look at that so inside of book item i'm going to go ahead and just down here add in a method called updated and then the name of any property that i have inside of here so for example if i wanted to hook into when editing is updated i prefix the method with updated and then using camel case i give the name of the property in here so let's just die dump
03:37
toggled or life cycle hook so we know that this is a life cycle hook and when i hit edit you can see this dumps out so anytime that value gets changed this life cycle hook will detect that and it will do whatever you want inside of here now we don't want to check editing to see if that has been changed but we do want to check the notes within this form now lifewise clever enough
04:02
to allow us to do something like this form notes that will look inside of the form here based on this property name and then inside of the book form it will check when notes is updated so let's just try this out i'm going to die dump on life cycle hook again this isn't actually going to work at the moment so if i type something nothing happens now let's just think about why that is
04:25
for a second remember that we don't have the live modifier added to this text area we don't usually add a live modifier because we don't want a bunch of network requests to be sent down but in our case we do we're going to change this a little bit in the next episode but we do want this to be live because we want it to be updated as we type so i'm going to switch this over to live
04:47
and i'm going to head over and give this a refresh when i type something now that life cycle hook is called because our form over here the notes within our form are being updated so basically we can hook into any property when it changes and do something so what we're going to do now is introduce another method on our book form to specifically update the notes so let's go over
05:12
to our book form and let's come down here to where we're updating this and i'm going to create a new method in here called update notes what we don't want to do is trigger update every single time we update our notes because we don't need to update the title and author we're just updating our notes so inside of update notes we can go and just say this and let's just check what we've done
05:34
here book update and again we can do the same thing this only notes so just a method that's responsible for updating the notes so now what we can do is over when the notes get updated we can say this form update notes and that should be it okay let's try this out and then we'll run over it just in case this doesn't make sense so this is our first book i'm just going to say great and
06:03
okay yeah so we get an error here type property book must not be accessed before initialization now this basically means it can't access it because it's not being initialized and the problem that we've got here if we think about it when we update our notes here we are updating or trying to update a book which in this context hasn't been updated so we need to bring in mount
06:27
to do what we did over on our edit form to say this form set book this book so we set the book when this mounts and then we can update the book when the form notes is updated so i'm going to say great and there we go now we've sent a bunch of network requests here which is not great we're going to cover that in the next episode but of course when i refresh here it goes as well because
06:52
we're not hooking into that let's just check the database though because we should have great written in the notes brilliant okay so we'll finish up by just getting this initial value into this input and then we'll run over this just so we know that we're clear okay so the reason that this is happening is because over in our book form when we set our book where if we did that
07:16
we are not including our notes in here so we want to make sure that we now include notes as part of the initial state when we're reusing this book form for update purposes let's head over and give this a refresh and yeah so let's have a look null to proxy okay yeah so this needs to be nullable and there we go so we have great in there i can update this refresh the page it's already
07:42
been updated because it updates as soon as we hit a key okay let's just run over this just to make sure that this is completely clear so over in our book item if we open up the template we just introduced a new input which isn't part of our standard form because this is a kind of anomaly we want this to update as we type so we made sure we used live when we referenced the notes because
08:07
we want this to update as we are pressing a key which we're going to change very slightly later and then over in our book item we brought in our book form we set the book when this mounted so we can use our book within our form and then we hooked in to the form being updated when we updated the notes which comes from our templates everything sort of pieces together nicely when
08:31
them notes are updated we go ahead and call that new update notes method which just updates that book with just the notes that we have stored in here via wire model so this can get a little bit confusing if it is just have a really good look at it and eventually it starts to piece together and you can see how all these things start to connect together but this is now working we can
08:54
update any of these books with any notes and the state just remains however we are sending a huge amount of network requests so if i was typing a really long note about this book that is a bunch of network requests which we don't really need to be making so let's see how we can change that in the next episode

Episode summary

In this episode, we dive into handling real-time updates for a notes field on each book card. We're building a system where as you type notes for a book, those changes are instantly saved—no extra save button needed! We kick things off by refining the UI to show an editable notes section using a textarea, and hook this up to our data model with Livewire's wire:model.

You'll see how to use Livewire's lifecycle hooks, particularly the updated<Property> method, so we can react whenever the notes field is changed. We walk through setting up that method, and wiring it up so that every time you type, the backend is updated too. There's a little gotcha here: we realize the book isn't set on the form at mount, so we fix that, and also ensure we're initializing notes correctly.

While this approach works and you get that immediate feedback, it's certainly not perfect—we're making a bunch of network requests with every keystroke! At the end, we point this out and tee up the next episode, where we'll look at a more efficient way of handling these updates. For now, you've got live, reactive notes working—just be ready for the flood of requests if you type fast!

Episode discussion

No comments, yet. Be the first!