- [Instructor] We have a pretty nice interface.
But just reading everything from a static,
sort of, hard coded object is impractical.
You would probably want to use something
like Ajax or the newer Fetch API
to bring in some data.
And with Vue JS that's actually pretty easy
but a JS calls need to happen at a specific time.
So let's got ahead and modify this.
And what I'm going to do is
just go ahead and actually get rid
of all of this right here.
Let's go ahead and hide this, so,
we don't get some funky stuff happening there.
So we're going to delete this.
And instead of referring to that variable
that we don't have any longer,
what I'll do is I'm going to create
an object like I had before.
And I'll set up the maximum.
I'll set it back up to 99.
And then I'm going to initialize
a variable for my products.
Now, it's important that I do this
because information is only going to be reactive
if it exists when this component gets created.
So if I just read the data into a variable using Ajax
that data wouldn't be able to update
because, again, we just need to have stuff predefined.
So in addition to creating data
what I'm going to do is use something
called the Lifecycle Method.
So if Vue JS has a bunch of different events,
and so Lifecycle Methods
are nothing more than just events that happen
as you start creating the component.
So what you actually create when you create this application
is a component.
And those components have, sort of,
like things as they get initialized
and as they get created
and they get rendered,
they trigger different events.
And we can capture some of those events to do things.
Now the one that we're interested in
is called mounted.
So this is the application,
sort of, ready to be displayed.
And everything else has happened.
So in this mounted method
we're going to use a function here.
And it's important that we use mounted
in the function notation.
We can't use the arrow notation, like this.
Although you might see this
set up like this as a function here,
that also works.
But traditionally you just create a function
and in this function you just
do whatever you want.
So what we'll do here is use the Fetch API,
just because it's easiest.
And do note that the Fetch API
will not work in Internet Explorer.
And then we're going to load
some data from an API that I have created here for you.
So, h plus sport dot com slash api
and I'll get the products
and I will get them with a price
and ordered by price as a matter of fact.
Okay, so once we ask for that data
we're going to use a promise.
So this is going to say,
when that data arrives I'm going to put the response
and parse it.
So I need to convert it from just a bunch of text
into an object that is in the JSON format.
And once that happens,
then I'm going to take that data that I received
from that JSON object
and I'm going to put it in.
So I'll call the products.
And I'll set it to that data that I receive.
And, traditionally, you could add more stuff in here,
about what happens with the error.
But this is actually enough.
Once we sort of get this information,
we're going to parse it from text
into a JSON formatted element.
And then we push that data into our products,
which is identified here by null.
So let's take a look at our application.
And you should see that we have
a lot more items here.
So it's just that simple.
Look how easy it was to work with Vue JS.
You just sort of have to know
where to get things from.
We were able to create
this pretty awesome interface very quickly.