3.4 Showing and Hiding Elements and Handling Clicks

Let's begin adding some interactivity to this particular part of our application and more specifically, into our create quiz component. So the first thing we want to start with is the displaying or not displaying one or both of these parts of our component, the plus button and the form. So when we first load up our application, we wanna just see this button and not this form down below. So let's start with just that. So there's a couple of different ways that we can handle that. One of the more common ways is to define some sort of state that your component or that your application is currently in. And at this point, we're either creating a new card or we're not, basically is what this is boiling down to. So since it's really only two states we can be in, one of the most common ways to handle this is just by using a simple flag, and maybe that's all we wanna do in this case. We could use some more complicated states where we could transition from one state to the next state and I'll show you that in another lesson. But basically, let's just do something simple so that we can get started. So in order to facilitate that, once again, we need to be able to have some data that we have access to all throughout this particular component. And just like we've done before, we're going to handle that with our data function that is going to return some things, and one of the things that we want to return at this point is the state that we're in. So like I said before, we're either creating or we're not. So we're going to say we are is creating is going to be our property, and by default, it's going to be false. So that's not very complicated, that's pretty simple stuff, but for now, this is really going to get us where we need to go. So what I wanna do is I wanna use this is creating to determine when I am showing the button, or when I am showing this card. So what we're gonna do is we're going to come into this button, and we're gonna use a new view attribute inside this particular component and this is going to be v-show. So v-show is going to take an expression that needs to evaluate to true or false, to let us know if we should show this particular element and all of it's children, if it's true. And if it's false, it's going to hide it. So when do we wanna see this button? We only wanna see this when we are not in the creating state. So in this case, I can say not is creating, just like that. So let's come down and make sure that that looks right, it does look right. Okay, so now we want to do the opposite for this div which is going to contain our form. So we'll say v-show is going to be equal to and we want to show this when is creating, when we are actually wanting to create. Let's go ahead and save all that. If we come back over here, now that form has disappeared and all we're left with is the button. So that's pretty good. Now we're getting somewhere. But if I click this, nothing is changing. So we need to handle that time when I'm clicking on this and sending us into a different state. So how do we do that? Well, what we wanna do is, we wanna be able to handle that click event and do something when that happens. So we're gonna handle that on this button, so we already have this v-show. But now we can add an event handler here to say when a particular event happens, when a particular Interaction happens, I could handle that and I can handle that in a specific way. So the way that we handle that in view is we're gonna say v-on and then we're gonna use cone and say what we wanna be watching for in this case, I wanna know when the user has clicked on this. And when the user has clicked on this, I wanna perform an action, and what is that action? Well, we're gonna define a function that's going to handle that, and this case, I'm gonna call this openForm, just like that. And actually, I don't need the open and close parentheses, so we'll just leave those off. So we're going to define a function called openForm that is going to get fired as soon as we click on this button. So before we do that, let's kind of come down here and let's come into our module, and so we have this data function here. Well we can also create another section down here within our module and this is going to be methods. And within here, we can specify a bunch of different methods that we have access to from within our component and I want an openForm function. So I'm going to say openForm, no inputs and then I can do some sort of operation here. So just out of curiosity, let's just maybe write something to the console, so you can see this actually happening. We'll say click on plus button, just like that. So let's go ahead and save that. Let's come back over here and let's go ahead and click this button, and we'll see we have clicked on plus button. So we can see now we're handling that event and I can fire it off as many times as I want. But now what I wanna do is, I wanna be able to toggle back and forth between the fact that I'm editing and that I'm not editing. So instead of just putting something in the console here, we'll just say isCreating = true, and we'll save that. We can come back over. Once I hit the plus button, we get an error and we get this uncaught reference error. Now this is important to understand because once we start to interact from within our module here, we have to be very specific and very explicit about what value we're talking about, what property it is we're talking about. And in order for us to access this data in here from within our Methods, we have to specify this.isCreating and we'll go ahead and save that. So let's come back over here, let's refresh our page and hit the plus button and now we see our creating form so that's pretty good. Now I can start to type things in here and I can create a description and then I want to do something or right now may be that wasn't what I wanted to do, and I want it cancelled. But I'm hitting Cancel and nothing is happening. So we now need to undo what we've just done. I need to take us out of creating mode or out of that state so that this disappears. So let's come back over here and let's do the same thing for the cancel button. So for the cancel button, just like we did up here, let's go ahead and copy this. We will go to our cancel button and we'll paste this in here but instead of going to openForm, we'll say closeForm. So we'll save that, we'll come down here. Let's create a new function this time called closeForm, and this is going to do the opposite, we'll say isCreating=false. We'll save that now. Let's come back over here and refresh. So now we can hit Plus. Now we get this form. If I hit Cancel, we go back. So now we can go back and forth. to these different forms. Now, one thing that's interesting is that now we can open and close this form. But now I want to be able to input some data in here, into these different input boxes. How do I do that? Alright, well we're going to do something somewhat similar We're gonna start by creating a couple of different properties up here. So what are these data properties that I wanna get access to? Well, I wanna get the value that's in this input for the title and the value that's in this input for the description. So what we're gonna do is we're going to create two of these values down here, two variables that we can save something into. The first one is gonna be for title. So we'll simply say this is going to be titleText and we'll just define this as empty to begin with. And then we'll say that we also have descriptionText and that's gonna be empty to begin with as well. So let's save that, so now what we can do is we can use these values, these properties down here and we can bind this variable with the value that is in these different input boxes right here, and that's actually very simple to do. Now there's a couple different ways to bind within view. There's the concept if you've ever worked in angular. There's the two way binding. There's the one way binding. Then we'll talk about a little bit of both of those as we go. This is going to be a two way binding. So when we wanna do a two way binding, the traditional way to do it is to say that I'm gonna specify a v model and that v model for the title here is going to be titleText. We can save that and now we'll come down here to our description and we'll say v model is equal to descriptionText like that, so we can save that. Now, what do we wanna do? Well, when we click on the save button, we wanna do something with it. Well, we're not quite to that point yet, but let's just say, v-on:click, I want to saveList, or something like that. So we can save that. Now also come back down here to a new function and this is going to be saveList. So in this case, I want to take the values that are in titleText and descriptionText, and I wanna do something with them. I want to create a new card. I want to create a new quiz list and I want to add it to my collection. But before we get that far, let's simply just see how we can get access to these values. So let's go ahead once again, let's do some console here. So we're gonna do console.log and we'll say titleText and this value is going to be this. TitleText and then we'll do the same thing for the descriptionText, and this is going to be descriptionText. Okay, so let's save that. Le's go ahead over here and refresh our page. So now we have our main view. We're going to click on the plus button and we get our values here. So let's go ahead and say this would be chapter 3, or call it whatever you want. Let's type a description, some description like that, and let's go ahead and hit the save button. So once we hit the save button, we see here that now we have titleText and description. So we have a hold of these values here using this model binding, this two way binding into our titleText and our descriptionText. But now what do we wanna do? We wanna save this as a new list, but there's a problem. We don't really have access at this point to our quiz list. Where does that quiz list live? Well, it's way back over here in the parent of where I'm living, in this data section right here. So what I want to do in the next lesson is show you how we're able to communicate from a child component that is created and being instantiated inside a parent component, how we can take data from that child component and send it back up to the parent, so we can do something with it.