This is going to start to get into some really cool, really fun kind of concepts, so hopefully you enjoy going through this guide. I'm going to switch to Visual Studio code and the way that we're going to accomplish this change in behavior is going to start with props.

There are a few ways that you could do this type of change. But I'm going to start off with one of the more basic ones and hopefully you're going to learn and reinforce your learning with props. And then you're also going to see how we can start to implement conditional behavior with the view components.

With Auth here, I'm going to pass in a prop and this is just going to say something like form, type. And here I'm going to pass a string in and this is just going to say login. And then on this one, I'm going to say form type and now I'm going to say registration.

Okay, so what we're doing here is we're passing in a new prop here called formType. Now, we could call this anything you want, but I like formType because I think it's nice and explicit. And now what we're doing is we're saying that this first one is going to be a login form, and this next one's going to be a registration form.

Now if we switch back here, we first have to define the props that we're receiving. The way that you can define the props is let's go under data and I'll say props and this is going to be an object make sure you put a comma after that, so that it doesn't give you an error. And the props we're going to receive are going to be, let me do the name just formType yes, and it's going to be a string.

So formType, which is of type string just like this. Let's make sure that we actually are passing all of this in the right way. Remember that you can just call this from within the view. Here I'm going to in double curly braces say formType just like this. And now if we switch into Google Chrome you can see we're passing in login or registration.

That is perfect, we're able to pass the data in and now let's see how we can make this behavior dynamic. If you look at the design here, we have a few key differences. We have the name of login right here in the top header and also in the link name, and then we have sign up.

Now this is what the designer did. I actually prefer register or registration more but it's completely up to you. And the way I'm going to show you it's not going to matter, you can go with whatever your preference is. The name on the link and the heading is different, and then we also have an extra field in the registration component, we have this name one here.

We're about to learn something new, so let's get ready for that. Here inside of the form, I'm going to add in a conditional. The way that you can do this in view is it's called a directive and so let's add one more input here at the top and I'll give us a little bit of room. And in the input this one is not going to be email, it's going to be name. Make sure that you go and you also add that to the data list here.

Now we have a name, if you hit save and come back here, you'll see that we now have a third field on both of them. Just to make sure because now that we have three fields, it's going to start to get a little bit messy, let's add a label in front of each one of these.

I'll say label and then, if it lets me type, there you go. For this one will just say name and that's all we need to do for the label, hit save, if you have prettify it'll fix the indentation. Next one's going to be Email and then this next one will be Password.

And one other thing I'm going to do just to make this easier for us from a styling perspective, I'm going to wrap up each one of these in a div. Here I can say div and then let's just wrap this up, and this is going to make sense in one second when you see why I'm doing this, because it's directly related to how view is going to manage the conditionals.

Okay, so now what we have is, we'll eventually add a class for styling and that kind of thing. But we have a div wrapper for the name, email and password, and you can see that we have name, email and password and so all of that's working.

Now what we want is with login we do not want to show the name, we only want that to be there if it's for registration. I want to also change this name because it's going to be easier inside of home. Instead of registration, I'm just going to say register. And the reason for that is because I want to reuse this formType name, it'll make it really easy. I'll be able to use it for this heading, and also for the link, if I give the exact name, then I can reuse that nicely.

Okay, now that we have that, if you come back into the form, we can finally learn about conditionals. The way that view does this, and this is very cool. First time I saw this I was pretty impressed with view, is you can add a directive and say v-if.

Now if you're using Visual Studio code and you have the view helper installed, then when you just start typing v-, you'll see all of these built in directives.

And we're going to learn about these in the course, but for right now, I want to just start with if. I'm going to say v-if=, and now this is going to be bound to data inside of this component. What I want to do is this, this is the same thing as if you had a JavaScript application, and you're just writing a basic if statement.

Inside of here, I'm going to say v-if, and then formType, which is the name of our prop, triple equals and then we want register, just like this. Now hit save, and come back, oh, and it looks like we have a little bug. Let's see property or method registers not defined. Oh, and that, sorry this was a mistake of mine. Whenever this is, I'm kind of glad I made it so you can see what I did wrong.

Whenever you say v-if or you have any of these directives, everything inside of the quotation marks here is going to be processed like regular JavaScript. Register when I said that, what view did, is it came down here and it looked for register or it came in props, and it didn't find register anywhere. And so because of that, that's why it through the error, all you have to do is wrap it up in a string.

I put single quotes around it, because if I put double quotes, it would think that the directive was over. And I'm going to say v-if formType register.

<div v-if="formType === 'register'">

And there we go, now it's working, clear the error out, hit refresh, just to make sure and yes, it's working. And look at this, we actually have our dynamic form. We now have the login component that is only showing those two elements. And then we have the registration component that is showing all three.

So as you can see, we're able to completely reuse the exact same component and with one line of code, we're able to make the components start to diverge and allow us to have more flexibility and this starts to get into the dynamic nature of view and JavaScript frameworks.

Resources

• Source Code