Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e15 – Pricing Component

welcome back in this episode we're going to be working on this pricing page now at first glance this may seem like a simple page we're gonna use views

data-driven approach to really drive this out so the first feature that we have on here is of course we have three plants we have our starter our pro and our all-star and they each have a

monthly price but on top of that we also have these buttons up here that we can change and we can change our pricing over to yearly and when we do we change the pricing but we also add an

additional benefit notice benefit number four doesn't exist in monthly and then we'll have a third one which would be lifetime now this one has yet another benefit but on top of that we lose the

label notice that in yearly we have /yr and in monthly we have /m oh but in lifetime that all goes away and then finally to top everything off we're gonna make this

have two currencies and we're going to calculate those on the fly so right now we're looking at US dollars but then we can switch over to euros and still maintain that preference even when we

change monthly to yearly to lifetime pretty cool pricing page it's going to be a great and fun project stick around all right so let's get right to it for setup on this video I am using the exact

same project that we used in the previous episode now just to recap very quickly I have a view CLI app and the only thing I did was pull in tailwind CSS then we actually created the

component that we worked on in the previous episode which is the autocomplete and in this one we're gonna be working on the pricing so that kind of catches you up so the first thing

I'll do is create a brand new file and let's go ahead and call it pricing dot view now this file of course will have a template and it will also have a script ok so now let's go ahead

and register that with our router let's create a new route right here and we'll call that slash pricing and we'll just name it pricing and for component let me go ahead and import that so import

pricing from views and then pricing dot view ok then we can use it down here as pricing and just to make sure that it's working let me go ahead and put a div here just with an H 1 that says pricing

and if we visit the browser there it is perfect so everything is working in this episode we're gonna be focusing around the fact that view is data-driven and it's very important concept to

understand about view conceptually speaking everything in view relies on data so data is the first thing that you have and then everything happens off of it so this is gonna be a great example

of how to manipulate data into the actual view as opposed to creating a view and then fetching some data as a second thought view strongly advises you to think data

first and then everything else so let's go ahead and start with a very simple design and will continue iterate on it until we get to the final design that we're working with so let me go ahead

and create a new div here and then for classes on this wrapping div let's take up half of the screen so we'll say width of 1/2 and let's give it a dark background let's say BG blue

900 and let's give it rounded corners we'll say around it LG will give it a shadow and will also give it some left and right padding of pax6 and then some additional padding on top of bottom

we'll do 12 on this one so quite a bit more we'll also be using flex but in the column direction and finally we'll go ahead and do all items Center so what is the first thing we need to have well we

know we're gonna need basically a set of buttons so let's go ahead and create a button and we know we're gonna have two of them and initially we'll call this the starter and then we'll have another

button that will be our pro package so let's go ahead and check our progress in the browser and there we go now it's all the way to the left and the buttons you can't even see them but they are there

as you notice right there so let's go ahead and give this a class of flex and then we'll just justify:center I think that will get us to the middle and there we go all right

and again our buttons are there but you can't tell because the color actually matches our background so to fix that we'll go ahead and wrap our buttons in another div tag and then this one will

need some additional classes now this is mostly styling around just a convention that you're used to seeing with the buttons so this is sort of how you would achieve it with tailwind CSS again many

different ways and many different CSS frameworks that you can use I happen to be using tailwind for this example so let's start with a BG of gray 400 and let's also do rounded full for the

background and then of course we'll need to flex that way there are actually next to each other so okay so that's starting to look good let's go ahead and justify around and we'll give it some padding of

one all the way around what does that look like okay so that's starting to look a little bit better but obviously our buttons need to be styled as well so I'm gonna select both of them at the

same time we'll style both of them together so we say this would be a class of rounded full as well let's do small text so text extra small and then font bold traditionally as a design tip if

you have small font you want to that font really does make it sound out so we'll do left and right padding of six as well as top and bottom of one and finally it's actually do an uppercase on

this let's see what that looks like then finally if you click on it of course we get this outline so let's go ahead and get rid of that with focus outline – none we're gonna do something else for

that let me go ahead and close this that way we have a little bit more room now you see now you can't tell great so that's looking good for those buttons now we know that one of these will need

to get styled whenever it is actually selected and for that we'll use BG blue about 600 and then we'll use text gray 200 so that would be sort of our selected state so there we go so of

course when we click on pro we'll want to move that over to this side so we'll go to starter and pro and of course right now it doesn't work yet but by the end of this we'll have that changing

from left to right great okay so that's good for that top section let's move on to the next section and so the next section of course is our actual plan whatever the plan is that we have so

let's add a div here to wrap everything up and I know I'm gonna have an h1 and the first one will be starter to match our plan so we'll say starter and then underneath

it we're gonna have some benefits so we'll have an unordered list with some items will say benefit one let me copy and paste this a couple of times we'll say benefit to benefit three and benefit

for we take a look at this of course again it is there you can't see it because of the text so we need to add some styling let's start with a class of text white and there we go so now we can

see it but of course we're gonna need quite a bit of padding to move this down because right now it's on top of that so I'll actually wrap this in an additional div let's put it right here let me fix

my indentation and on this class let's add some padding so we'll say padding top of eight and there we go so that moves it down but now if I was to repeat this plan I think we're gonna run into a

small issue so let's repeat it twice and there we go so they are stacked on top of each other but I want them to be left and right so let's give this a class of flex and there we go but I also

want them to take up the entire space that they have so for that we can say with a fool with w – fool and now they move over to the left and that's because we don't actually have any width for

these classes so let's go ahead and each of these divs let's give them a width of 1/2 and so there we go so now we're starting to look much better on those all right so let's

finish it up by adding the actual price of each so we'll go ahead and select both of these and do them at the same time well add a new div here we'll give this a class of large text we'll say

text for Excel and then we'll do font bold on that and for now let's make them both $99 and we know that's gonna say month so there we go so that's looking better but I do want the month to be

styled slightly different so to do that what we're gonna actually need to do is divide this into its own diff so let's leave the 99 in there let's actually duplicate this 99 and then in this one

let's put that /m oh and let's style this completely different so that one let's add a little bit of padding left that way is separated from our actual number and then we'll move it down with

some padding top remember this is gonna be a slightly smaller text so that's gonna make it come down a little bit and then let's go ahead and mute the color of the font with some text gray 300 now

we take a look at that it looks good but of course we need them to be next to each other not stacked so flex to the rescue one more time let's add a div with a class of flex and we'll put those

divs in there and there we go so that's looking better but of course we want that to be centered underneath of this so for that we'll have to add one more class which is justify:center and there

we go and then let's add some padding to move it down so we'll say padding top of eight to keep it consistent there we go so I'll go ahead and duplicate this right here and I'm gonna change this one

as well and we'll make this plan 199 so there we go so that's starting to look a lot better now this starter plan here is gonna need some additional formatting so let me do

both h1 s at the same time let's add a class here of let's do text to excel so quite a bit larger and then font bold there we go much better now the last thing I probably want is to go ahead and

bump these benefits down a little bit so let's add a padding top of maybe 4 yeah there we go so we have quite a bit more padding between this and this so this is PT 4 and this is PT 8 but this is kind

of related content so that kind of makes sense to have this kind of stacking up against each other so that's it this is our basic design for what we're going to be working on for this project so the

first thing I want to do is go ahead and start keeping track of which button gets pressed I want to know is it starter that is currently selected or is it pro so very easy to do let's add a new data

property here it's gonna be a function that returns an object and we'll simply call it current frequency so we know that this is gonna represent whether it's monthly or yearly which actually

reminds me this should actually say monthly and yearly not starter and pro let me go ahead and make that quick change here so this would be a yearly rate and then on this one we'll have a

monthly rates and then what I do need to change here is this one we'll call the pro pack there we go so we have monthly and yearly and then we have the starter and the pro package perfect nice and

simple pricing page so go ahead and keep track of frequency and initially let's go ahead and set it to monthly okay so now whenever we click on these buttons we actually want to change that

currently selected frequency so we'll grab both at the same time I will say all right when you get clicked all we need to do is set current frequency equal to something so in the case of

this top one at the end we're gonna make all of this dynamic but from now I'll go ahead and actually keep track of it this way so monthly and then we'll set it equal to yearly so we'll hit refresh and

you can't see it yet but if we actually took a look at our view dev tools and opened up app pricing so we see that right now is set to monthly I'll click on yearly and you

don't see it change but that's because it didn't actually refresh them so we'll refresh it and there we go so yearly I'll move it back to monthly and there we go so it's monthly alright so it is

working we just don't have any feedback right now we need to set this actual state based upon which frequency is actually currently selected so to do that of course we need to do a special

class binding so I'll go ahead and bump this into its own line down here is to make it a little easier to read and then this one as well there we go alright so we'll add a new binded class

and what do we need to do well we need to check what the currency frequency is and if it matches the current one in that case we're going to apply these special classes that we added so how do

we do that in view will do current frequency is equal to in this case monthly if that is equal to true in that case go ahead and output out these classes so I'll actually cut them out of

here and then we'll paste them right here this should actually be a question mark otherwise this will be the : don't output anything okay so I'll go ahead and copy that onto this line here

and the only thing I need to do is change it from monthly to yearly all right let's see this in action yearly monthly there we go it's that simple simply by keeping track of that variable

we're able to apply this class so whenever we click on one or the other we can change the styling and let the user know which one we're actually selecting so that's pretty cool so the next thing

I want to do is I want to change the pricing obviously if it's monthly it'll be ninety-nine a month but if its yearly of course I want that price to be the yearly price so how do we do that well

let's take a data-driven approach surely we could check here something like V if and we can say well V if frequency is currently monthly and so on then do this otherwise do that but that is not

dynamic we really need a dynamic way of doing this so how about this well add a new data property here and we're gonna call this plants so this is going to be every single

plan available for our pricing page so this will be an array and of course each one will be inside another object and then the first thing we'll need to do like I said is this pricing difference

so let's create a new key here for pricing this will also be an object and then we'll start with monthly now yes we could just do 99 but the problem is that if you recall from over here this says

/m oh and if we change over to yearly we're gonna want to change that to why are for a year so we can't just simply assume that this is our monthly pricing so will actually create another object

inside of here and then we'll say alright well the price on this one will be 99 and the label will be /m oh okay and then we'll have another one for yearly and so we'll say alright for

yearly do the same exact thing so pricing will make that $4.99 and this is not M oh but why R and of course we're gonna need the same thing for this second pricing that we have of course

the pricing will be a little bit different I'll bump this to $4.99 and we'll bump the yearly to $9.99 okay so how do we use this data that we just created to actually output this out and

what we can do is just remove this all together because we can dynamically create that block of HTML based around how many plans we actually have so for each plan

I want to output this right here let's go ahead and do a V for right here and we'll say V for plan in plants go ahead and output that if we take a look at this you'll see that this repeats two

times because we have two plants again this is the data driven approach if we actually copy this and paste it a third time now we have three plants so this is how that data driven approach really

comes in handy let me undo that change I just wanted to show you that so you understand the concept so the floor pricing we're gonna have to break this up a little bit and of course we're

going to need this 99 to be how do we fetch that plan well we have plan right so plan will be equal to this object right here and then I need the pricing inside of it but then I need the month

or the yearly we can't just fetch the price because it needs to be based around which one is actually selected so to do that we'll say plan dot pricing and then inside of there I want the

current frequency I don't know if you know this but you can access objects with this array syntax that way we can actually attach current frequency to it so pretty cool so from here I'm actually

going to need the price and then for this slash monthly down here we'll need the label let's take a look at that yearly and there we go so that right off the bat is already changing and of

course we see /m oh and will change over to yearly we see /yr how simple is that just with that small change we basically have a working implementation of this but let's keep going further I also want

to make this dynamic so let's get started on that let's go ahead and add it to our plants of course it would make sense that those benefits are part of our plan so let's

add a new key here for benefits and then we follow the same exact convention so this will be an object and inside of this object we're gonna need to have a key for monthly and a key for yearly so

I'll actually go ahead and copy monthly and yearly but this of course will be different this will actually be an array of benefits benefit one and it will copy that a couple of times so we'll say that

this plan will have three benefits under the monthly section but then of course when we switch over to yearly you're gonna get some additional benefits so let's give them one more benefit as a

benefit number four I'll go ahead and copy that section and let's add it to this section down here so now we're keeping track of our benefits in monthly and yearly and our pricing so let's go

ahead and apply the changes so then we'll do the same exact thing here we don't need to have all these list items really we just need the one and we need to repeat it based on how

many benefits we have so we'll apply the same change we'll say V for benefit in and of course we have our plan so we'll say plan that benefits then we'll grab our current frequency that way it

matches up and then for our text down here we'll just output out benefits alright let's check that out we'll hit refresh and now when we change

to yearly you see benefit for pops in monthly yearly great that's working good it's the last thing we need to make dynamic is just the plan title so we'll add that down here let's add a key of

name we'll call this first one starter and then let's add another key here for a name we'll call this one Pro so then of course as we've done before this starter is no longer going to be that

let's go ahead an output plan that name and sure enough we have our starter and our pro yearly monthly and everything is working exactly as expected pretty cool stuff

this is really the basics of this whole entire thing now I do want to take it one step further and it would be the following first of all monthly and yearly is still

not dynamic right now we are hard coding monthly and yearly so if I was to do the following if I was to actually create a third version here and we'll call it lifetime right and we'll have the same

amount of benefits but we'll add obviously one more benefit just to keep the plants consistent so we'll add a fifth one here I'll go ahead and copy this and let's bring that benefit down

here as well as our pricing so our pricing is also going to change let's go ahead and make a lifetime plan now and for this one the lifetime will be maybe twelve hundred and it won't actually

have a label because it is a single payment all right so I'll copy lifetime let's add it down here and this one let's make the price 2200 now when we come back here now we have an issue I

would have to add that new lifetime to our labels but really we should be just doing that dynamically so how can we do that dynamically how about this I'm going to delete the second button

because I really only need the one button so let's add a new section here and we'll say alright v4 so how do we get a list of our actual frequencies well what we need to do is

let's go ahead and grab the first one and figure out these titles are and then we'll use the same one for all of them basically trusting that the format will be

followed by each one so that would look something like this so we'll need our price and our second argument will be our key which is really what we are actually interested in so we'll save

frequency in our plants and to grab the first one we can use that array syntax again let's go ahead and grab the first one dot pricing okay does that work yeah it does notice how we have three of them

now so all we need to do is go ahead and fix some of this stuff so this is not hard-coded monthly but this will be changed to frequency remember we are receiving our frequency right here right

so we can use that for frequency and now that's working right so we can select all of our plants so the last thing would be just to create the correct label for them so instead of monthly

will actually use frequency and there we go so that is now dynamic again if tomorrow we added a fourth one it would simply just work nice way of doing this okay so the last thing I want to tackle

is the following right now our pricing is in dollars but what if you actually needed to have several different currencies at the same time again because this is a data driven

approach this is very very simple to do so let's go ahead and add a new section down here so right down here we'll add a new div and let's give this some classes first of all let's go ahead and separate

with PT for that way is a little bit lower then we'll do text Center and then let's give it a color of text gray 400 and this make the text smaller and again let's make that bold so in here we're

gonna have for now initially we'll only have two currencies but of course you can have as many as you want so we'll make this an anchor tag but it won't actually go anywhere so we'll say all

right when you are clicked I want you to prevent the actual default behavior and what I want to do is set our currency it doesn't exist yet so let's go ahead and actually set that as a new data property

will say currency and initially will default to US dollars so when we create this we'll have US dollars will be one car and of course we'll have another

currency here which will be euros so let's add that in right now you are so when you are clicked go ahead and set currency equal to in this case USD and in this case euros so EU are alright

let's take a look in the browser there we go so when you click on this or click on this of course it changes we know that's working so what we actually need to do is be able to do something with

our price so that it actually changes otherwise it doesn't make sense so what we're gonna have to do is actually wrap this in some sort of way that we can actually attach some logic to it right

now we're just outputting the price there would be no way for us to actually change that price so let's wrap this in a new method that we will call get price so to get price will actually pass in

our dollar figure so we're gonna figure everything off of the dollar but then the dollar sign it doesn't make sense that it's out here anymore because it may not be dollars so we'll pull that

out and let's go ahead and create this new get price method let's add it right up here we'll say methods get price and of course we'll accept the price so this for now we'll simply return a dollar

sign and then the price and then we'll go ahead and add the comma here and let's check it out so that's it I mean this is basically doing the exact same thing that we have

but now we have a place to attach our logic to it and I want to do it in a dynamic way I don't want to do something like if currency is equal to USD then do this else will do that I don't want to

do it like that I want to do it as dynamic as possible so here's what I'm thinking if I have a method for each of the currencies that we accept we can say something like ok

so this method name will be currency USD and this will accept the price and in this particular case this is what we're going to return so now let's create another one for euros so we'll say

currency e u R will also accept a price and this one the logic will be slightly different so we'll say return let's just say that the current exchange rate would be 0.85 so we'll get our price and times

at 0.85 and then to wrap everything up we'll go ahead and add the appropriate symbol for the euros okay so how do we make each one of these be called dynamically well as it turns out this

entire object right here can also be called as an actual array and I don't know if you know this but we can do something like this we can say all right so return this and then we can actually

pass in a string so our method names start with currency and then it's our current currency all uppercase so we can say currency plus this currency which is our data property right here to

uppercase and then we'll go ahead and pass in the price all right let's check that out hit refresh hit euros and there we go so that is working but of course we'll

have to actually do something about all these decimal places so easy enough I'll go ahead and cut this out we could use math dot seal that we'll put in our price in there and we'll change over and

there you go that's working just fine but furthermore because of the way that we did this when you click on yearly it remembers what currency we are currently on so how cool is that now if we needed

to add a third currency this is all dynamic the only thing I need to do is go ahead and create a new currency method to handle this new currency say a currency ABC where this one will maybe

be price times 0.75 obviously a currency that doesn't exist but then as long as I've got a button for it it actually would work let me show you well paste this one in and this currency is going

to be called ABC and we'll call it ABC and now we have a third currency so we click on ABC or euros or US dollars how cool is that so that's an easy way to actually make this work exactly how you

want it to work and then as a side note if you wanted a third package of course very simple to do all we need to do is add the data for a third plan so I'll go ahead and copy this one and

just bump it down here just for an example and now we have three plants how cool is that and everything just works exactly as you expected pretty cool stuff pretty simple to do

view really makes this a breeze so that's gonna wrap it up for our lesson today as always don't forget to subscribe and go ahead and invite your friends as well share the channel and

make sure that everybody knows about coders tape thank you so much I'll catch you next time

We’ve talked about Vue’s data-driven approach but in this example we are diving deep in exploring the many features that allows Vue to manipulate data effectively. We will be building a pricing page front scratch.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.