It's not uncommon to include the ID of the resource that we are working with. Like, for example, I can see where a user might want to know what the ID is. Now, yes, we can say that the ID is in the URL, but most users aren't going to make the correlation between what's in the URL and the ID of the article, because it's really meaningless to them, unless there is something in the page to where they can draw that correlation. So let's add the ID. We need to do this inside of our article form, and we're just going to add that public property, but we also need to set that inside of the setArticle method. We'll just set the ID property equal to the article's ID, and really that's it, because when it comes to updating the article, we don't want to do anything with that value,

We'll just set the ID property equal to the article's ID, and really that's it, because when it comes to updating the article, we don't want to do anything with that value, because it can be manipulated in the page, which we'll look at here in a moment. So we need to output this inside of our view. Let's do this inside of the heading at the top. So we'll have edit article, we'll say ID, and then we will include the form ID property, so that now in the browser, we see the ID, and that's great. But remember, Livewire is a mix of server-side and client-side, in fact, it blurs the line between the two, and it's very easy to get into the mindset of not having to worry about the data that is coming from the browser, or more specifically, caring about the data.

between the two, and it's very easy to get into the mindset of not having to worry about the data that is coming from the browser, or more specifically, caring about the data that we send to the browser, like the ID. The ID is very important, so we want to protect that as much as possible. Let's inspect the title field. So of course, we see our HTML, and we have our input elements, we have our CSS classes, then we have our wire:model attribute. Well, what would happen if I change this from form.title to form.ID? Keep your eyes on the title field as I press the Enter key, and we can see that it changes. The value is now the ID of the article.

Keep your eyes on the title field as I press the Enter key, and we can see that it changes. The value is now the ID of the article. Now, if I was someone planning to do something a little naughty, then I would be excited about this because, well, I have this information, theoretically, I should be able to submit that, and then maybe, just maybe, if someone wasn't careful on the server side, I can start breaking things. So let's say that we want to set the ID to something over 9,000. Let's go to the Network tab, and then let's save this. Now, the request that we are concerned with is this first POST request to the update URL. If we take a look at the request and then scroll all the way down, we can see that there

Now, the request that we are concerned with is this first POST request to the update URL. If we take a look at the request and then scroll all the way down, we can see that there were some updates sent to the server. There is form.id and then form.title. So thankfully, because we didn't do anything with the ID property in the update method, we prevented anything from essentially breaking our application. But what if I want to take this a step further? What if I wanted to be sure that we could not make any changes to the ID? Well, we can. We can protect our ID and really any property by decorating it with the locked attribute.

Well, we can. We can protect our ID and really any property by decorating it with the locked attribute. And it does almost exactly what its name implies. It locks that property. So if any update from the browser includes the ID property and the value is different, it's going to throw an exception. So let's go back to our article. We can see that the title changed because our update included both the ID and the title. So we need to inspect this once again. We need to change the wire:model to form.ID.

So we need to inspect this once again. We need to change the wire:model to form.id. The value in the title field changes to what the ID is. And let's try to set it to something else over 9,000. Whenever we submit the form, we now see that there is an error. Update locked property form.id. And we can use the locked attribute on any public property. Because remember, public properties, well, they're public. They are available in the browser. So that means if we wanted to protect the article property, we could do that.

They are available in the browser. So that means if we wanted to protect the article property, we could do that. But we don't necessarily need to. Because by default, the properties on Eloquent models are locked. And we cannot change them through Livewire updates. And that's really all that there is to it. It's very simple to use. So any property that you want to protect in your Livewire components, just decorate with the locked attribute. That'll prevent any update from modifying those values.

just decorate with the locked attribute. That'll prevent any update from modifying those values. And you don't have to worry about Eloquent models, because those properties are locked by default.