Okay, before we continue, I think we need to take a step back and have another look at the v-model directive. At the beginning of the series, we learned the basics, and for example, we know that we can apply it to a form input, and then magically it keeps everything in sync. But what exactly happens when we apply it? It's really important. Let's have a look. Now here's index.html, but just for a minute, let's bring it back to a fresh boilerplate. So get rid of the text color, and then within here, I will add an input, where we will use v-model, and how about name?

So get rid of the text color, and then within here, I will add an input, where we will use v-model, and how about name? Okay, let's declare it. Return name, like so. Okay, let's view this in the browser. So I give it a refresh, and if I bring up Vue DevTools, right now, of course, name is an empty string, but if I were to change it to Joe, of course, we then see that the name data property is updated as well. And the same, of course, works in reverse. So if we change this to Jane, then Vue picks up on the change, and it re-renders the value.

And the same, of course, works in reverse. So if we change this to Jane, then Vue picks up on the change, and it re-renders the value of the input. Okay, so if we were to take a step back and think, what exactly is v-model doing? Well, at the very least, at some point, it is setting the value of the input. So we know, if I were to remove this, at some point, we are setting the value equal to name. Alright, so let's just play around with this for a minute. If I give it a refresh, and bring back Vue DevTools, let's set the name to Jane again, and it works. We set the value.

and it works. We set the value. But because we removed v-model, it's not going to work the other way around. So if I change this to Jeffrey, notice at no point does the underlying name property get updated. Okay, so it sounds like that's the other piece of the puzzle. If we were to manually reproduce what v-model does, we would set the value of the input, and then we would listen for when you type into the input, using the input event, and we would then update the name to be equal to the input's current value. Alright, let's give that one a shot.

we would then update the name to be equal to the input's current value. Alright, let's give that one a shot. So once again, I set the name from this end. That works. But if I update it to, how about, my own name? Aha! It worked! So we can see that v-model is basically doing two things. First, it binds the value, and second, it listens for when the value changes. And as it turns out, what you see here is basically the long form of v-model.

First, it binds the value, and second, it listens for when the value changes. And as it turns out, what you see here is basically the long form of v-model. v-model name. It's the same thing. Okay, so now that you understand this important piece of the puzzle, let's bring back our existing app, like so. So we come back, give it a refresh, there's our app. And now, yeah, let's apply this knowledge. So here we set up our assignment tags, and you'll remember in the last episode, we ran into this awkward situation where we need to pass the current tag to the assignment.

what the current tag should be, we need to listen for that and then update it on this end as well. Okay, well, if you take a look at this, though, it's kind of like v-model, isn't it? We're passing a value, we're binding a value, and then we're listening for some kind of input event so that we can update the data property on this end. Okay, so yeah, it does seem like it would be neat if I could use v-model on things other than basic form inputs. And as it turns out, we actually can. So let me show you how this works. I want to set v-model to the current tag, so I'm going to pass it in like this.

So let me show you how this works. I want to set v-model to the current tag, so I'm going to pass it in like this. That would then allow me to get rid of this here. And if I switch to assignment tags, let's remove that as a prop. And instead, I will replace it with this modelValue prop name. This is the default prop name when we are using v-model on a custom component. Okay, so now modelValue should be equal to whatever the current tag is, which means I can replace that current tag prop with modelValue. All right, but that's only half of the puzzle. We are now passing in the value.

All right, but that's only half of the puzzle. We are now passing in the value. The next step, as we discussed, is to listen for when that value changes and then emit an event. And we've done that partially. We emit this custom event called change. I'm going to change this to update:, and then the property that we're updating, in this case, modelValue. And keep in mind, this event name is not arbitrary. It needs to be this exact shape in order for things to work.

But if we did everything correctly, when I change it to math or science, notice that it updates. Okay, let's see the other end. So if I open up assignment tags, notice modelValue is science. We change it, and that part is working as well. So this is actually a relatively easy way that we can use v-model on things other than basic form inputs. So just to reiterate and make this crystal clear, if you want to use v-model on custom components, then your component needs to offer a modelValue prop, and this will accept whatever the value of current tag is in this case.

components, then your component needs to offer a modelValue prop, and this will accept whatever the value of currentTag is in this case. So we can then use it, we can bind it, however is necessary for the component. That's the first piece. The second piece is then to notify the parent when that value changes. And we do that by emitting an event, update:, and then the name of the prop, which is modelValue. Okay, so the last little piece of the puzzle is if you don't like using modelValue, it's kind of vague and arbitrary, you can be explicit about what it should be called. So if you want it to be the exact same thing, you can do this shape here, v-model current.

kind of vague and arbitrary, you can be explicit about what it should be called. So if you want it to be the exact same thing, you can do this v-model current tag. So that's saying, okay, I don't want it to be model value, I want it to be current tag. So now if we add that, we can update the prop like so, and now we can update that here and here. Yeah, and now we effectively have what we started with, but now we don't have to do that awkward thing where we listen for a change event and then manually update it on the parent. And don't get me wrong, we're still effectively doing that behind the scenes, but we're able to mask it behind the very useful v-model directive.

And don't get me wrong, we're still effectively doing that behind the scenes, but we're able to mask it behind the very useful v-model directive. Okay, so I'll let you take one last look at this component. We've now extracted an AssignmentTags component. Now of course, the parent still needs to know what tag are we working with, what is the current tag. So we use v-model to track that. Then AssignmentTags can be responsible for all the markup and basic behavior for how to display and update those tags. And like I said, down the line, if we want to add an option to create a new tag, that

to display and update those tags. And like I said, down the line, if we want to add an option to create a new tag, that can all be done right here within this component that is specifically tailored to working with tags. And the benefit is, if I now switch back to assignment list, we can see that everything is fairly clean once again. I don't have a bunch of logic related to working with tags. I have a single place to track what the current tag is, and then we can filter against it. And yeah, I think this ends up being pretty clean. All right, let's move on to the next episode.

This is just a simple explanation with no code.