- [Instructor] In this video, we're going to start
populating our Vue instance with real data
and incorporating it into the template.
The way we're going to make this work is by copying
markup straight out of our mockup
and making the dynamic parts in
the Vue parlance reactive data.
So, over here in my editor, I have the mockup file open
as well as the index.html and app.js.
We can use go to line, Control + G to go down to line 114
which is where most of the action happens here.
If I mess over into the gutter, I can collapse everything
that appears here in the customizer div
and just copy the entire thing like this.
When switching over to my index.html file,
I can scroll down to the same place on line 114
and just paste over what I had before.
I don't need the message anymore
and I copied the entire customizer div so there it is.
So I have all the little areas where my static image goes,
my sizes, color, everything's there.
But now I need to use some of my
inventory data to populate these fields.
So I'm going to start with the size selector.
Let's go over to app.js and we need to make that
size data available to our Vue instance.
Right now, all I have is the message which I don't actually
need anymore so I'm going to change this to sizes.
And we're going to pull the sizes from the inventory.
So that was window.inventory
and I'm going to open up the file again
so I can check what it was called.
This is ch02-inventory, all sizes,
window.Inventory.allsizes.
Okay, that looks right so let's save what we have so far.
We'll switch back over to the browser and reload it.
So at this point, everything looks right.
I have all these sizes.
If I open up the Vue dev tools, Command + Option + I
and switch to the Vue tab,
I'm going to check my root component.
And here I have my data with the sizes.
But in terms of what's actually populating the size menu,
it's still just static html.
We need to change this so it's
populating those options using our inventory.
Back here in my editor, I'm going to switch back to index.html
and it's these options that need to go away.
So I'm going to strip out all of them except the first one.
So, what I need to use is a custom Vue directive.
And what I'm going to use here is v for
which is like a for loop that will go through
an array of data and print out its values
in whatever format you need them.
Our sizes are just a list of numbers in an array.
V for can also handle objects, give you access to the keys
and values in your lists which would be handy
if our option values were going to be different
from our displayed labels but they're the same here
so I can just use a simple one.
Now this looks like a custom html attribute.
So I'm going to be iterating over the sizes array
and each item in it needs a name
so I'm going to say size in sizes.
If you've ever used a JavaScript for in loop,
this is basically the same thing.
Because my values and my displayed labels are the same,
I don't have to set up a custom value key here.
I can just print out what I need using the mustache tags.
What I'm doing is I'm printing out one of these option tags
for each of the items in the sizes array
which I'm calling a size and I'm printing it
right here with my mustache tags.
You save this, switch back to the browser again
and reload to confirm that it still works.
Indeed, it does.
There's a lot more in the Vue documentation
about how to render lists like this
but for simple cases, it's just this simple.
So now we have some reactive data
that's flowing into our Vue instance.
If the inventory ever changed,
Vue i would update instantly without
my having to touch anything.
Now we can move on to the next step.