- [Tutor] Next, we're going to start tackling a couple
of additional components.
Mainly we're going to be working
with the range selector.vue file.
So that is that input field that
has a little toggle that you drag.
Now, when we do that
we're going to have to use V model through components.
So that's kind of interesting to look at.
We're also going to modify the product list.
And finally, we're going to take the cart
and move it back into app.vue.
So that means we're going to have to move things around
and rewire as needed.
So let's get to it.
Here's where you can find the beginning files as well
as the end go.raybo.
And here's where the differences are.
All right, let's go into our project and what we have here
in the home components, let's go back here is this section
with a range selector here.
So we are going to grab actually not the container
but all this stuff right here and take it out of here.
And then we are going to import
the range container component,
which right now is actually empty,
the range selector component, actually.
So in home, we're going to import range selector
and then just from the components location again.
So you can use the add sign, remember, and then
you can use component and then we'll type in range selector.
That means that if it's coming in as a component
we'll need to add it over here to this component section.
So we'll add that.
And then I'm going to go into my range selector.vue file,
which happens to be empty.
And I'll type in a template tag here
and I'm going to paste all that HTML.
I am going to need a script here.
And in here, we'll do the traditional export default
and add just some props here.
So for props
I'm really only going to need something called model value.
So if you remember, when I talked about component events
when you create an input field and you want to use
the V model directive, that sounds like a mouthful.
You can do it
but you have to sort of code it a little bit differently.
So we want to go ahead and wire up the home section to use
this range selector component.
So that is going to go right after this container
we'll say range selector, and we're going
to need pass it along V model and our maximum value.
So if you remember in here, we have a max value
which right now this should be all broken.
But remember, there's like a max value that is right here.
And we're passing that along
to this range selector in the V model directive.
So that usually keeps track of a variable
and it has two way binding.
So if you modify the input field, the variable changes,
and if the variable changes,
the input field will automatically update as well.
So let's go ahead and save.
Now that we have that range selector component being called.
I know that there's going to be some errors in there.
So element that's missing and the ending tag.
I need to make sure that I add a slash right here
unless I wanted to use the closing version of it.
And there's probably lots of other issues that I need
to deal with as well.
Now here, I also want to pass something else along
to my range component, actually to my range selector.
So in addition to passing the maximum, I'm going to pass
in the products as a prop, but here, instead
of passing the actual products, I'm going to pass
along my filtered version of my products.
Remembered there is a computed item right here
that passes along the filtered version of the components
so that it essentially sends a different array.
And the nice thing is they could have sent
the filter products as a prop as well.
So this product right here could read filter products
but really the component doesn't care what it gets passed.
So as far as the component is concerned,
it's just going to get some products.
And that way it can make sense if you want
to reuse the component later.
So I'll go back into a range selector
and I need to make sure that I also receive the other prob.
So it should be, as far as this thing is concerned,
it's going to receive some products.
Right, as well as the model value.
And then in my section where I actually input
the item let's see.
So here in my input field, everything
is going to look pretty similar,
but I'm going to input into this value V binded directive.
This model value that the input field is going to receive.
And then I'm going to track an input event in here.
And that input event is going to emit
an update of model value.
Then also pass along the event.
So if you want to understand
how this works, make sure you watch
the video on component events.
And now, we don't use the V model here
because we're using it in the parent component
and passing it along through this API.
Right, and let's see, so this should no longer
be filtered products.
It's should just be products
because that's what we're passing in as a prop.
And when we want to display things,
the max variable doesn't exist in here anymore.
So what we can do is get the model value
which is what the new variable that we need will be called.
Let's see if it's working.
Okay, it looks like it's actually working again.
There's a little bit of a problem with this one.
And it's because of some of the values that we're getting.
So see like the silver jacket
at 35 bucks, shouldn't be showing up.
So that is a classic issue
with a variable acting as a string
and the way that we're going to deal with that.
So model value might be coming back as the string maybe.
And so I wanted to make sure that in the home section
this maximum is actually going to be cast into a number.
And then I'll put it in there.
So let's see.
Now that's acting a little bit better now.
There you go.
So that's working pretty well now.
So that's that range component, not that big
of a deal to move it, but there was a few sort
of pieces that we needed to deal with.
So right now we have like this product list that's empty
you know, sort of scaffold it.
And then we have the product that is looking pretty good
but there's just too much sort
of product in this home section.
So we're going to remove a piece of this,
this thing that says the transition group here.
So we're going to take this out.
And we're going to create a new component here.
Oops, I deleted that one.
So let's go and create a product list component.
And here we'll pass along products.
And again, the filtered version of the products
for this one.
Now this is going to be interesting.
We need to import not the product
but we'll import the product list.
So we can actually just modify this old one.
And then here, where I list out the components
I'm going to modify that to be product list as well.
And I can also now get rid of this display cart.
This may have been here just from before.
I don't really need the display cart variable in there
because it's, I think it's in the nav bar,
so we don't need that out there.
All right, so before I forget,
I still have that in my clipboard.
So now I can go to product list and I'm going
to paste that template.
It's a bit of nervousness that I get whenever
I have something in my clipboard and I haven't pasted it.
I guess so now I need to just wire this thing up.
I also need to bring in some styles.
So all of the product styles let's see,
cause I don't really need them out here.
So wouldn't it be nice if we kind of clean this up
so that we have a smaller app.vue file
and take that out of there.
And now we can add those back to product list.
We can just add these into the components style section.
So that's looking pretty good.
And then in our script, we're going to import product
from components product, and then
and this export default will receive the products as a prop.
And remember I'm actually receiving the filter products
but as far as this component is concerned
it doesn't have to know that.
And of course we'll need to specify
that we are using this product component.
So this is actually the component
that we're calling right in here.
So we're importing it and then using it
and then the products will be received.
So that looks pretty good
because I'm not using filter products anymore.
I need to say item and products here.
And let's kind of clean this up and just use that
other notation, which I think is sometimes
a little bit cleaner.
All right, let's take a look at our app
and see if we've done everything correctly.
It looks pretty good.
I know there's an error here.
And the error is right here
but let's check our range things working just fine
but somehow our little plus buttons aren't working.
And the reason for that is
because we just sort of inserted a level into our structure.
So remember home is calling now product list
whereas it used to be calling product.
So now we need to go into the product and add
and this is getting sort of crazy
but we need to add one more parent here.
All right, so let's check it out.
And now it works again.
So you really do have to mind
when you start restructuring items to make sure
that everything has the right sort of paths
whenever you are emitting events, to make sure
that the proper component is capturing the event
and then using V model is a little bit weird
with components.
But I think it's really nice
because you can create a component that behaves just
as any other input field would when using v model.
You can really make the components sort
of track that variable like you would
with a normal V model and input fields.