3.6 Extracting Quiz Logic Into a Component

Now we would like to start to be able to take a look at the cards or the flash cards that are found within each of these quizzes. So we've been able to do pretty good right now to be able to create these quizzes and display them to the end user. But now I wanna be able to click on one and have it show me the cards that are part of that quiz. So that's what we're gonna start to move towards here on the next couple of lessons. The first thing that I wanna do, though, for cleanliness purposes, is I want to extract the card information or the quiz information out of this quiz list view. So really at this point, I want this to be a list of quizzes, and I want to be able to refer to each one of those quizzes individually as its own element. So the first thing that I wanna do is I want to create a new component and abstract all of this out into that component. So we're gonna begin by creating a new one. So let's create a new file, and this is simply gonna be our Quiz.vue file. And, as before, we're going to go ahead and start to create this with our templates, with our script, and with our style, just like that. Okay, so now we have this part of our component. Let's go ahead and add in our export here, export default, and there we go. So now we wanna take the information that we've been sticking in our quiz list, which is basically all of this right here. We want to cut this out, and we wanna bring it into our quiz, and we'll go ahead and paste that in. Now, really at this point, we don't really want to be doing all of this looping on this particular one right now. So we're going to remove this, and we're just gonna have it be an individual quiz. So this is going to be the content of a single quiz. But in order for this to work, we're going to need to have a quiz property that we can refer to within here that we can also be injecting into this component. And remember, the way that we do that is through our props property here. And that's gonna be a list, and the thing that we're gonna be passing in is going to be a quiz, just like that. So let's save this, so now we have this new component, we can come back to our quiz list. We can now import this. We need to create our import statement, import Quiz from. And we are importing this from, but now at this point we are already in our components folder, cuz we're in QuizList.vue right here. And we just wanna refer to Quiz, so we don't have to go into components, we're already there. So that will start with that one, so now we would just need to add in our components section here. And our components, we're going to import Quiz, like that, we can save that. And now we can come up into this div, and I can say I want to have a quiz just like this. And now, I need to be able to do some looping and some binding. So let's remember what we did before. We had that v-for, and we were saying, and this is what we pulled out of the individual quiz, since we want this to be handling only a single quiz. So we're gonna say v-for quiz in quizzes. And then once again, we need to be able to pass the quiz that we're referring to into that child component. And remember, the way that we do that, is with v-bind. And we want to v-bind to the quiz property, and we wanna set that equal to quiz. So let's go ahead and save that. So if everything worked properly, everything is going to be rendered again. So just to make sure, we can refresh, we'll start all over. And we are getting a bit of an issue here. And this is another interesting thing that you will see if you are debugging these Vue.js applications, that in instances where we're using v-for, it is recommended that we use explicit keys. So what does that mean? Well, that simply means that when we are dealing with objects that we are looping through, it is generally a good practice to be able to refer to those by in id or by a key. So let's go ahead and add something like that in. Let's go back to our App.vue. And in here, you can see that we've created our quizzes list, and we've got some quizzes down here, but there's really no identifiers. So at this point, let's go ahead and add new properties of id. So this is going to be quiz number 1. And then down here, this is going to be quiz with an id of 2. So now we have these new properties that have IDs in them. So what we can do now is we can go into our quiz list, and the way that you specify a key for each one of these identities in this for loop. We simply add a key property, in this case, this key attribute is actually :key, and we're gonna set that equal to quiz.id. So now if we save that and we come back over here and refresh everything, we should now get that little error kind of warning thing to go away. And now we're able to go on with our business. But we're gonna run into an issue here, because if we start to add, the logic that we're using to add a new quiz into our list does not take into account the fact that we need to add an id. So the way that we're gonna handle that is by just slightly modifying the logic at our top level, in the function that's handling the creation of the quizzes. And I'm simply gonna drop a little bit of code in here. I'm gonna explain what it is. So we're gonna create this constant maxId. And what we wanna do is we wanna set it to the next highest ID that is not currently in the IDs that are found within quizzes. So the way that we're gonna do that is we're gonna use the Math.max.apply function. And then we're going to apply Math, and this is going to be looking into the quizzes collection. And we are going to use a map function, where we're going to return id. So what it's going to do is it's going to go through all of the values, all of the quizzes in this list, and it's going to map each one of those to a value where it's going to return that quizId. And it's gonna take the maximum. So that's the current maxId, and then the next maxId is gonna be that one plus 1. So then what we can do in here is we can simply say the id is going to be nextid just like that. So let's go ahead and save it. Now we can come back over here and we'll refresh. Now when we create a new quiz, we can say New Quiz. And then we can come in here and we can say Description, and we'll go ahead and Save. And this will handle the ID of that particular new quiz that we've added. Okay, so now to this point, we have taken all of the quiz logic, and we've extracted it into its own component, which is going to be very important once we move on and we start to do some other interesting Vue things. But we wanted to kinda get this cleaned up a little bit in here so we don't have to worry about a lot of excess markup in here. Because we're going to want to start to work on doing some work with transitions later on, in Vue.js. And in order to do that, we need to kind of clean this up a little bit so we can transition between states. But, for now, this is a good step in cleaning that up and extracting all of the quiz logic into its own component.