4.1 Introducing View States

Now this is where things really start to get interesting. In this lesson, I'm going to introduce the ability to transition and to add a little bit of animation logic into our application. And we're gonna do that by transitioning between view states. Now that might sound like a lot, but using semantic and using Vue.js it's actually quite simple. And you can just reuse a lot of the knowledge you've already gained to this point and just add in a little bit more. So what we're going to do now is we want to be able to detect when one of our quizzes is selected. And when one is selected, we want to transition into a new view with a little bit of fanciness, and then we want to only see the words that are associated with that particular quiz. So let's go ahead and come over to our code. And we're gonna start by being able to select a particular quiz. So here we are in our quiz component, and I need to be able to detect when one of my quizzes is selected. And then I wanna let my parent quiz list know when one was selected and which one it was. So in order to do that, we're just going to say, when a user clicks on the content of one of these quizzes, on one of the contents of the cards, I am going to send an event. So when I click on, use v=on:click. I am gonna say I want to view quiz. Not only do I wanna view quiz, I wanna know which one, so I can also pass a parameter in here to let let the application know which one was selected. And because I all ready have access to this quiz that was passed in as a property from my parent quiz list, I can use that as a parameter to my function. So now I want to call viewQuiz passing that as a parameter. That doesn't exist yet so we need to handle that by adding in our methods section here. And I'm gonna create viewQuiz and remember this gets a parameter and then I need to do something with it. To this point we've already learned that I want to emit a new event and this new event is going to be view quiz. And I'm to simply going to pass that quiz that I selected. So not very complicated, these are all things you've already seen and that you've already known how to do. So now we are passing this event back up the chain. I can come into quiz lists now and I can say when I have selected one of these quizzes, I want to handle that event so can say vOn View quiz. And when I do that, I want to fire off the view quiz function. Now I'll save that, and now once again we're going to need a methods section down here, so I'll simply add that in. And this is going to be view quiz, and remember it's going to be getting that quiz that came along with the event. So now I have been able to capture that event and I've passed that selected quiz back up the food chain. But I need to save it somewhere because really what I want to happen is I want to show the cards of the selected quiz. Selected Quiz, that sounds like something we might want to hang on to. Let's go ahead and create our data section here like we've done before. And within here, I am going to create a property. So I'm going to return an object here, and I'm going to create selected quiz. Now by default, we're just gonna give this kind of like an empty quiz kind of a look and feel, just so that I can hang on to whatever I have selected. So by default there is gonna be really nothing in here. It's kind of like an empty shell of a quiz. But when I fire off this viewQuiz method, I want to simply set that selectedQuiz equal to whatever quiz I have selected. Now we have that information, and all I want to be able to do is to show the cards of the selected quiz. Up here I can now say, for all the cards in the selected quiz, show all of them and loop through them. So, lets go ahead and save that. Let's see where that gets us at this point. If I were to come up and click on chapter 1, you'll see that I get the words that are associated with it. If I click on chapter 2, I'm getting them, there just aren't any of them, so I have zero. So I can kinda go back and forth between these. But I don't really like that very much because I can still see these quizzes. And I really want to transition between states, so I want to introduce the idea of being in a state when I'm viewing my quizzes, and then a different state when I am viewing the words and then being able to transition between them. So let's go ahead and see how we can do that. The first thing that I am going to do is we need to know what state we're currently in. In order for that to happen, I am going to create another variable here and this is going to be called viewstate and by default we're gonna be in a viewstate of quizzes. Which basically means in the beginning I want to only see the quizzes. So, in order for me to take advantage of that, I want to add in another mechanism, a conditional mechanism, so that I can only view certain parts of my element in my template at certain times. So we're going to use a new attribute called v-If. Now v-If and v-show are very similar to each other. But the difference being vShow is really going to write everything out to the DOM, but it's going to make things hidden, or a display of none when the show expression is false. When it's true, it's going to make it visible. Now v-if is a little different, it's going to be a little lazier. And it's gonna say if the V if value is false, it's not actually going to write it to the DOM. But if it's true, it will write it there. So really that's kind of the difference there and depending on what the needs of your application are, you may want to choose a vIf over vShow,, but i just wanna show you how this will work. So I only wanna show these items here if the view state that I'm currently in is equal to quizzes. That's going to allow me to only show this element, this component, if the view state is quizzes. Now we're going to introduce another state, but for now we're just gonna say v if, on the flash cards here we're gonna say v if view state is equal to and we'll call that state cards. We're not there yet, but we'll get there. So now if I save that, I can come back over here and I should only see these quizzes. Now if I were to click on one of these, I'm still firing that event, but unfortunately I'm not handling the change of state. And I'm not changing my current view state, so I never see the flash cards associated. The way to fix that is to come down here into our view quiz and say this.viewState = cards. And if I do that and I come back over here and I refire, now I'm gonna go back to a point where now I can see these words, and that's good. But now I don't have any way to get back, and that transition is pretty harsh. Now we're going to take advantage of another mechanism within ViewJS to transition easily between those states.