parentheses it should show the number. Yeah, and you know what? I think that looks good as is. So now, of course, we need to make it dynamic. Well, we have the assignments array. Why don't we echo out the length of the array? assignments.length. All right, come back. With any luck, it'll still say three. But if we add a new assignment, that should bump up to four.

Then I need to increment it by one. Then I need to grab this heading out of the DOM, find the span, and then update its textContent. I mean, I promise you that's probably what you would have done back then. But now, because of reactivity, we can simply echo out the length of the assignments. It's so easy. Okay, what next? Maybe assignments can have tags associated with them. So you could imagine maybe I only want to see the assignments from science class versus your math class.

But yeah, of course, we don't see anything because I don't have any tags. And in fact, if we open up the console, we should see a warning. Property tags was accessed during render, but is not defined on instance. You're probably going to see that a lot. So when you do, just remember, that is Vue's way of telling you, hey, you're trying to use something called tags, but we have no clue what that is. And if we come down, sure enough, we have not declared what tags is. Okay, so let's start by creating a computed property called tags. And let's begin by hard coding it. It could be an array like science, math, and reading.

And let's begin by hard coding it. It could be an array like science, math, and reading. All right, come back, give it a refresh, and now we have an array of tags. But, of course, we want this to be a little more dynamic. Okay, we'll get to that in just a second. First though, let's style it just a little bit, and I promise this will only take a moment. I'll begin by setting a class of flex, and then I want a little gap between them, maybe gap-2. Yeah, all right, next, each button should have a border, and

only the tags from the assignments list. So that's half of the way there. But if we come back, you'll see an issue. Of course, because two assignments have the same tag, we've doubled up here. Now, I don't think JavaScript has any kind of array.unique method, which would be nice. But a way to get around this is to wrap it in a Set, an ES6 Set. So if you take this approach here, actually, can I just return that? Yeah, I can, actually. So all you need to know about Set is it's a way to create a set of items.

Let's add a click event listener. And when you click, what should happen? And here's what I think we should do. I keep talking about a sourceOfTruth, because it's a key concept here. So if we think in terms of a sourceOfTruth, maybe I need to track what the currently active tag should be. Okay, so in that case, why don't we say, when you click on me, let's do it inline. The current tag should now be whatever the name of the tag is, like this. Okay, so now if I come back, we're going to track currentTag, like so.

So let's try it again. If I switch to math, yeah, notice there, I'm not seeing an update. It seems to be a little bug. If I come back, now I do though. Okay, so now if you think about it, all we have to do because of reactivity is just say, don't show me all assignments, show me the filteredAssignments. So with that in mind, maybe we'll just call it filteredAssignments. Come back, we're going to add a new computed property, filteredAssignments. And now, yeah, to start, I could just return the original assignments array, and we'll get exactly what we had before.

And now, yeah, to start, I could just return the original assignments array, and we'll get exactly what we had before. But now we're going to say, filter the assignments where the assignment tag equals the currentTag, like that. All right, so this isn't exactly right, but I bet we get a little bit of feedback here. Yeah, so right now, we don't see anything, and that's because we are filtering it down where the tagName is an empty string. So that's not quite what we want. But yeah, when I do change the currentTag, it's working.

So that's not quite what we want. But yeah, when I do change the current tag, it's working. Here's my science assignments, and here's the math assignments. All right, so we're getting close. But now think about it, what if I want to deactivate this? Maybe I could turn these buttons on and off, or maybe I could also add another button that says all. Okay, let's do that. So let's go to tags, and we'll say I want an array where the first one is called all, and then the next ones is our set here.

So let's go to tags, and we'll say I want an array where the first one is called all, and then the next one is our set here. But now this isn't quite right. If we come back and refresh, you'll see, yeah, we actually have an array now where the first item is all, and the second item is a set. I actually want to basically array_merge those, so I can destructure it like this. There we go. Okay, so now when I click on all, we should take that into account. Maybe like this.

Okay, so now when I click on all, we should take that into account. Maybe like this. If this.currentTag equals all, in that case, let's just return the original assignments array. Otherwise, we will filter it down. Okay, so now I can set the default currentTag to all, and I think this will do the trick. Give it a refresh, and there we go. All tags, here's my math, here's my science. Okay, but now let's make the tags a little more responsive.