- Read Tutorial
- Watch Guide Video
In other words, I want to be able to have this nice log in title and button, and then I want to have the sign up or register one right down here. How can we do that? Because right now, we're just passing in a string that says log in, and it's lowercase, and the same thing for register.
Well, we have a few different ways that we could do this. We could build a conditional to check and say, okay, if it says log in, I want you to set a title and I want the title to be a capital string called log in. But, because we're working with JavaScript a programming language, we can do all of this dynamically. I thought this would be a perfect example to learn about computed properties in the Vue framework.
Essentially, at a high level, what a computed property is, is it's a function and it's a function that you can automatically run on data and then call it from within the Vue. The goal here is our login prop and our register prop will come in, and then the computed property is going to dynamically change that.
We're gonna write some pure vanilla JavaScript, and we're gonna connect that inside of a computed property. Let's now switch back to visual studio code. The way that you can define a computed property is in the script tag here. I'm gonna come right below where it says props, and I'm going to say computed. And computed, just like everything else inside of this script, is going to be a object, and so inside of here is where we can put our functions.
Now the syntax for doing this is to give the name of the function and then pass a anonymous function to it. I want to call this computed property formatted title, just like this, and then you say function. We're not passing in any arguments here, and then inside of the function body, we are going to perform all of our actual string manipulation.
Remember, what our goal is, it's to take a string, like login, and then convert it so that it says Login. We're essentially wanting to give a title format where we make the very first letter uppercase and then we leave all of the rest of them lowercase. We can do that by, and make sure you return this, by saying this.formType, 'cause remember, that is the name of the prop.
Before we do anything else, before we go and actually create this title functionality, let's just make sure that this part of it is working. The way that you can call this in the Vue is you can go up inside, and I'm gonna go where we have our button text here. Using double curly braces, I'm going to say formatted title, just like this, and now if I hit save, our buttons should at least be getting the dynamic prop data.
Let's switch to Google Chrome, and yes, it is, we have our log in and our register.
Now if we come all the way up to the top, instead of it saying formType up here, now let's say formattedTitle. Hit save and there we go, this part is gonna stay exactly the same until we actually change the data.
Coming back down, now that we're passing in the live prop data, it's actually time to implement our title function. The way we can do that is I'm going to grab the very first letter of our formType prop. The way you can do that in JavaScript is just by passing in the bracket syntax and a zero. This is going to give us the very first character in the string.
return this.formType[0];
Before we do anything, let's hit save, make sure that that's grabbing the right value, and yes, it is. You can see we have an L and an R.
Now, I also want to show you my process for when I'm building out these type of scripts because it's kind of a pain, if you hadn't noticed, to make small changes in formatted title or something like that and then keep on switching back to the browser to see how it's looking.
What I usually do is I just open up the JavaScript console right here, and I'll create a variable. I'll say let title, and then let's just make this one of our actual titles, so I'll say register. Now we have this stored in a variable, you can check it out by just saying title, and you can see it gets returned register.
Now what I can do is I can test out what I'm wanting to build. Remember, the end goal is to build something that says register. Let's now try that, I'm going to first try to grab that very first letter, I'll say title and then use the zero.
You can see that when we do that, we get the very first character here, and so I can say two uppercase, and that's a function. You can see that now has converted it, so it's a capital R, and so now what we have to do is grab the remaining characters, just like this, and then add and append them to the end of this title or this first character.
The way you can do that in JavaScript is by using the slice function. I can say title.slice, pass in where I want it to start slicing, and now you can see that returns E-G-I-S-T-E-R. Now let's put it all together, I can say, title, and then grab that first item.toUpperCase, call it as a function and then simply append it on.
Now if I run this, you can see that's doing exactly what we're looking for.
We want to grab the very first character, call two upperCase on it, and then we want to add on the rest of the characters. My normal process is I'll build this script in the console, just like this, and then I'm gonna copy this code over and I'll add it as a comment, just so I have something to reference. You can see, I say this.formType and then toUpperCase, just like this, and then I want to say this.formType, and then slice, and grab that very first element.
Auth.vue
return this.formType[0].toUpperCase() + this.formType.slice(1);
Assuming I don't have any typos or anything, then this should work. If I switch back to Google Chrome, you can see that's working perfectly. We now have our login text working for the title and the button, and the same thing for register, and we're using the exact same component.
As you can see, it may not look like this from a design perspective. We don't have the nice purples and the gradients or anything, but from the actual structural perspective, this is working. We have the right form elements showing up in each one, and then we have the ability to have custom titles and button links.
When we get to the style section, that's where we're gonna make it look nice and pretty like this, but in review, in this guide, we are able to walk through how we could leverage computed properties in order to generate a custom format and to run JavaScript code over our content.