- [Instructor] In order to make my component
a little bit more useful,
I need to be able to pass along the price
of each individual item.
So that's what I'm going to do,
and it's pretty easy.
Let's go ahead and open this up right here
and scroll down to where we're passing along this price.
And what I need to do here is pass along a prop.
So a prop is almost exactly like an HTML attribute,
so what I can do here is just say
I want to pass along something called value.
And then, this is going to get the item price.
So remember as we're going through these loop of elements
the price is in this variable called item right here.
And that's when I'm passing along,
just passing along the price.
Now this can either be a simple property like this,
or it can be a v-bind directive, like this,
or you could just use the colon, or the shortcut.
The difference would be if you wanted to use an expression
here as opposed to just a simple value.
So, this will be okay.
But if we wanted to use a formula,
we would need the expression.
So once you do this, then we need to go into our component
and we're going to add an additional thing here called props.
And props can be as simple as an array of things
that we're passing along.
So, in our case, we're passing along something called value.
And we'll need a comma right here.
And this will need to be end quotes.
Then once we have it in there,
we can get rid of it here.
Let's take a look and see if we got it.
And see, it's as simple as that.
You just pass along the property
and then it gets in here and you can do something with it.
So let's go ahead and actually add
the remainder of these properties.
So we're going to need value,
it doesn't really matter the order that you put these in.
We're also going to pass a prefix.
Also a precision.
And we're also going to add one called conversion
so that we can convert dollars to euros if we want to.
Let's go ahead and hide this right here.
Alright, so, this is the stuff that we want to pass.
It's just like copy this,
and I'm going to paste these in here.
Get rid of these commas.
Oops, think I went too far.
Let me re-scroll down there.
I got a little bit too greedy here.
So we will do prefix,
and in prefix, I'm going to try passing along a euro symbol.
So that would be &euro in HTML
and because I want to pass it along as a strain,
I'm going to need to put quotes in here
because it's going to assume that this is a variable name
like it did here.
Right, because it's got an expression here.
So, precision is going to be equal to the number two.
And conversion is going to be equal to .87.
Alright, this is a lot of stuff on one line,
so maybe we can put this on a separate line.
And a lot of times I like to sort of do this
so that it's a little bit easier to read.
Also it highlights when I forget a colon.
And for some of these, you probably wouldn't need
the colon there 'cause they're pretty
simple sort of expressions,
they don't really have anything complicated.
But, we'll just keep 'em.
And, we're passing along all these things.
Let's see if they are working.
It looks like everything's working.
Let's make sure that we delete these from here,
'cause we don't really need 'em anymore.
And see if we're still getting them.
I'm not getting the conversion yet.
And that's because I don't think I have modified my formula.
So this will be this value times this.conversion.
And now you should see these converted to euros.
So pretty easy.
Just by adding a number of properties
we're able to not just modify the format,
but then also convert these from dollars to euros.
And we can use that anywhere in our project.