Livewire has what are called lifecycle hooks. You can think of these kind of like events that occur throughout the lifecycle of a component. Like for example, there is a hook called mount. And you can think of the mount hook kind of like the load event within the browser. This is when the component is not necessarily loaded within the browser, but it is loaded in the Vue. And like the load event, this is a great place to initialize anything that you need to do within your component. So let's do that. I think this would be a great time to make our greetings data-driven. Of course, right now they are directly inside of our HTML, but let's do this right. Let's create a database table that will contain our greetings.

Of course, right now they are directly inside of our HTML, but let's do this right. Let's create a database table that will contain our greetings. So first of all, I've defined this mount method. This is going to execute for the mount hook with our controller. Now we just need to load our greetings. And we'll start by making a model. Let's just call it Greeting, and we also want a migration to go along with it. And as far as the table is concerned, it's going to be very simple. We are just going to add another column that will be a string, and we'll just call it greeting for the lack of a better word. And then we need some data to work with.

We are just going to add another column that will be a string, and we'll just call it greeting for the lack of a better word. And then we need some data to work with. So let's open up the database seeder, and let's add our greetings. Now, of course, we could do this in a variety of different ways, but I'm just going to brute force this because, well, it's easy enough to do. So we want a hello greeting, then we want a hi, a hey, and a howdy. So we just need to make those changes. And then, of course, we need to run our migration and then seed the database. But then that's going to give us some data that we can use to load inside of the mount hook for our component. So the first thing we need to do is create a new property. We have greeting, which we still need, but now we need greetings, which we will initialize as an empty array.

So the first thing we need to do is create a new property. We have greeting, which we still need, but now we need greetings, which we will initialize as an empty array. And then inside of the mount method, we will simply load our greetings by using our Greeting model. And let's just call all, which means inside of our view, we will need to iterate over our greetings. So we'll have foreach greeting as, we can't call it greeting because we already have a greeting property. So I'm just going to call it item. Let's add the end foreach directive so that now we can very easily just have our option. We'll still use the greeting string value. I mean, we could use the ID, but I don't really think that there's a need to do that. So we will use the greeting property as the value, as well as the text that we need to display here.

I mean, we could use the id, but I don't really think that there's a need to do that. So we will use the greeting property as the value, as well as the text that we need to display here. So once again, item.greeting. And so now we get an internal server error because that needs to be greetings as item. But now we can see we have our list of greetings. Hello, hi, hey, and howdy. And everything is still going to work just fine. If we change this to, hey, and then Jeremy, we will see, hey, Jeremy, as the result. Of course, we can change the greeting to whatever and the validation still works. So we haven't really lost anything.

Of course, we can change the greeting to whatever and the validation still works. So we haven't really lost anything. In fact, we've gained quite a bit because now we have the ability to essentially initialize whatever we need to initialize, just like we normally would with a controller and a view. And that's great. Thumbs up. So there are many other hooks, but there's one other that I think that we should talk about. So mount is probably going to be the most used hook that you will ever use throughout your Livewire career or your Livewire usage, I should say. The next is called updated. Now, there is an updating, but really the updated is probably the second most common that you would use.

The next is called updated. Now, there is an updating, but really the updated is probably the second most common that you would use. And there are two arguments that are passed here. The first is the property name that was updated. The second is the value. Now, this hook is going to execute anytime that there is an update to your component. So whenever we type a name into that input field and submit, that's an update. This update hook will execute. So let's see what that's going to look like. Since we know the property name, we can check if the property name is name, then we can do something with that.

So let's see what that's going to look like. Since we know the property name, we can check if the property name is name, then we can do something with that. Like, for example, we could set the name property to the lower case version. So we're going to use strtolower. We'll pass in the value. And then whenever we view this in the browser, we are going to see our name and the message will be changed to lowercase. And it's not just the message. It's also what is inside of the input field. Because remember that the name property is bound to the input element as well. Now, there is a variation of the updated hook that allows us to essentially listen for when a particular property is updated.

Because remember that the name property is bound to the input element as well. Now, there is a variation of the updated hook that allows us to essentially listen for when a particular property is updated. Our method name is just a little bit different. It still starts with updated, but then we follow that up with the name of the property. And this essentially gives us the same functionality, except that now we don't have to check if the updated property is name. We have a method that is going to execute specifically when the name property is updated and only when the name property is updated. So once again, we can say hey to Jeremy. And whenever we greet them, their name is converted to all lowercase. Now, of course, there are many other hooks that we can listen for. And later on in this course, we will probably do that.

Now, of course, there are many other hooks that we can listen for. And later on in this course, we will probably do that. But for right now, these are the two that you will most use. The mount hook is essentially where you want to initialize anything that you might need to initialize within your component. Loading data from the database is a perfect example. But then there's the updated hook, which executes whenever a property is updated. And then there's that variation to where you can listen for the update for a specific property. Just define a method called updated and then the property name, and you're good to go.