Okay, episode three. So at this point, you should be feeling a little more comfortable. So with that in mind, why don't we move on to lists and also computed properties, which you're going to love. Okay. Imagine you're in school and you need to build a little application to handle your assignment tracking. Okay. We'll call this assignments. And yeah, we basically want an unordered list with things like this, finish project, read

We'll call this assignments. And yeah, we basically want an unordered list with things like this, finish project, read chapter four, turn in homework. You get the idea. Okay. Let's have a look at this in the browser and that looks okay, but once again, I'd like it centered on the page. So this time what I'll do is I will pull in a CSS framework called Tailwind CSS. Now if you're not familiar with this, don't worry. It's not a prerequisite for the series.

Now if you're not familiar with this, don't worry. It's not a prerequisite for the series. You don't need to know any of it. It's just a way for me to quickly apply some CSS. Okay. So if I pull this in through a CDN here and you can copy that, if I come back and refresh, you'll see it will normalize or do a full CSS reset as you can see here. So now what I can do is reproduce what we did in the last episode by adding a class of height: 100% to the HTML, also to the body, and then set a display: grid and place-items: center.

Cool. So for each of my list items, I would like there to be a checkbox, something like this, input type="checkbox". And that way, if we come back and refresh, we can turn these on and off. All right. Cool. But yeah, think about it. In the last couple episodes, I kept bringing up this idea of a single source of truth. And right now, once again, the source of truth is the HTML, which we don't want. All right.

And right now, once again, the source of truth is the HTML, which we don't want. All right. Let's fix that. So we'll go into our app component, but this time notice we have an object that we pass to view.createApp. What I want to do is extract that to make it crystal clear that a component looks like what you see here. And then this section here is when you initialize view and you mount it to the page, but all of your regular components, and you'll create many of them, will take the shape of this. So we'll say data, and let's have a list of assignments.

of your regular components, and you'll create many of them, will take the shape of this. So we'll say data, and let's have a list of assignments. So I said assignments and list, which means it should be an array. And let's think about what each assignment needs. It needs the name of the assignment. So in this example, finishProject. And then it sounds like I also need a way to track if that assignment has been completed. So I'll set complete equal to false. By default, it is not complete. Okay.

By default, it is not complete. Okay. So I'm going to do this two more times, and I won't make you watch this. I'll fast forward. Like so. Cool. So now I have an array of three assignments. The next step is to loop over these assignments, and we can do that like this. I want to list item, and I'll say v for assignment in whatever reactive property we have here. assignments.

I want to list item, and I'll say $v for assignment in whatever reactive property we have here. assignments. And for each one, I can spit out the name of the assignment like this. assignment.name. It's as simple as that. For each assignment as assignment, echo out the name of the assignment. Okay. So if I come back and give this a refresh, now we still get the same list, but this time we are generating it dynamically. Okay.

Okay. But now we do have one problem. We don't yet have two-way binding, and here's what I mean. Take a look at this. I'm going to temporarily add a <pre> tag where I spit out our assignments array. So if I echo this, it's just going to stringify the array. All right. Have a look. We come back, we give it a refresh, and yeah, here we go. Now notice complete false, complete false, complete false.

We come back, we give it a refresh, and yeah, here we go. Now notice false, false, false. Even if I turn these on, it's not changing that underlying array. And that's because all we have here is just a basic checkbox. Vue doesn't really know anything about this. So why don't we use v-model like you learned about in the last episode, v-model assignment.complete. I want to bind the value or the check status of this input to this property here. Okay. So remember, it will bind the value, and then it will also update the underlying value if it's changed.

So remember, it will bind the value, and then it will also update the underlying value if it's changed. So notice once again, false, false, false. If I turn them on, we get true, true, true. And this is what we want. So as a general rule, whenever you're working with form inputs, you will always want to bind them using v-model. Cool. So let's come back and get rid of this. And this is looking pretty good.

top. And yeah. But now I want these to be dynamic, of course. I shouldn't see uncompleted or incompleted tasks in the completed section. Okay. So how might we solve this? Now your first thought might be, well, we can use expressions, right? So what if I filtered this down? What if I said, assignments.filter where each assignment is complete. And if you're familiar with the array filter method, we'll return only the items that return

What if I said, assignments.filterItDown, where each assignment is complete. And if you're familiar with the array filter method, we'll return only the items that return true for a given condition. So basically, filter this assignments list down to only those where the complete property is set to true. Okay. So if I give it a refresh, it will be blank. But have a look here. As soon as I start completing, there we go. They instantly switch over.

database. And if that's the case, you have unique IDs for each one, right? ID2, ID3. So that, of course, is the perfect key for each individual assignment. So if we come up here, we could do this, assignment.id, and then I can do the exact same thing down here. Okay, that should fix it. So if I come back and give this a refresh, this time I only select Finish Project. And notice we solved that weird little quirk there. So yeah, once again, to reiterate, just get in the habit, unless you know precisely what

And here's your first introduction to conditionals. I can say if and also show. And you'll use both of these. show, the only difference is it basically will toggle visibility. It'll set display to hidden if the conditional is false. So why don't we stick with that, and I'll paste this in once again, and then add length to it. Okay, so only show this section if we have assignments that have been completed and that resulting array is more than zero. Come back, refresh, and it works.

resulting array is more than zero. Come back, refresh, and it works. So now toggle these, and only then do I see the section. And yeah, take a look here. If we go down here, notice that we are rendering that section. It just sets display to none. So that's the difference between v-show and v-if. Notice if I change this here and give it a refresh, come back, yeah, there is no section here because Vue hasn't added it to the DOM. It will only do that when it re-evaluates, as you see there, and then it gets added.