- [Instructor] In this video, we're going to flush out
the directory people component
with a more complete template and introduce
how to use props and Vue to pass through data.
We previously talked about how
both the form and the list of people
need access to the people list.
So right now I have that people list
as part of the root components data.
We need to pass that from the root
into the people component for rendering,
and for that we need props.
So over here in my editor, I'm going to first
update the HTML to pass that data through.
So the data that we need is the people list
which is just called people.
So over here in index.html, here inside the root
I'm going to pass through people.
And to do that I'm going to use v-bind:people.
Of course, we can use the shorthand now,
so we don't need v-bind.
We'll just use the :people,
and the value should be the key from the Vue data.
So we're using the same name here.
If I save this, the data should be flowing through now.
And on the other side, in the component, I need to add
a new key to its configure object called props.
And in here will be the names of any props
that I'm expecting to come through.
So the way we'll do this is the simplest way
which is passing in an array
with strings containing all the names
of the props that you're expecting.
There's some conventions that you need to follow here.
If I wanted instead of calling this
just people to call it something like people list
with two words, I couldn't do it this way.
Vue wants you to use kebab case here
which would be people-list with a hyphen in there
which gets transformed on the other side into camel case.
So that would be peopleList.
So if you're every writing props,
and you feel like they're not getting through,
it could be because you're not following
the right naming conventions.
It's very easy when you're just using
a single word like this.
One other thing when you're passing through props,
this is the easy way where you just say,
what the names of them are.
But you can also specify the types
if you want to have a little extra data validation.
And to do that, you pass through an object instead
where the keys are the names of the props
which would follow the same naming conventions.
And then the value would be whatever the type
is supposed to be which in this case would be an array.
We're just going to go with the simple way for now.
Next thing we need to do is update the template
to actually use those data that are coming through.
So let's grab some HTML from the mock-up.
I'm going to jump down to Line 122.
Here we go.
So let's copy all this and bring it
back over to our directory.js.
And we'll update this template.
I'm going to follow the recommendation
from Vue's documentation when creating these long strings
of HTML inside your templates.
And I'm going to use a backslash on the end of each line.
So we're going to reformat this a little bit
and start adding backslashes.
Here's my image tag.
Then down here is where the bio is going to go.
I'm just going to get rid of all this.
Start adding some backslashes everywhere these lines end.
There, all the squiggly lines have gone away in my editor,
so I know that what I have here is valid.
So now you need to actually start using some data.
Let's grab the names of these from the data file.
So I'm going to need the name,
the title, the bio, and the image.
So I'll start out with some mustache tags.
And this will be the name.
This will be the title.
I'm going to get rid of this
because this looks like some sort of image ID
from the original WordPress site that this is based on.
So we don't need that anymore.
And for the HTML attributes, I can't use the mustache tag.
So I'm going to use v-bind again.
So this will the image.
And for the alt, I'll use the name again.
Everything else looks okay there.
I'll add one more line where we're going to put in the bio
which is called bio, yes.
Okay, now this is all fine, but none of the fields
are actually going to work because I have my data,
but I haven't actually referenced
any given object inside that array.
So let's add a couple containing divs.
So we'll make a person div that can hold all of this stuff.
And then we're also going to need
a container for all of these people.
So we'll call this results.
And so I'll just get rid of that
terminating space that was making everything upset.
Okay this looks good.
The only thing that I need now is to make sure that
I'm outputting one of these for each of these people.
So I need a v-for here.
And just like we've done before
we'll say that this is a person in that people array
which is the name of the data
that's passed through as the prop.
And each of these becomes the field
inside that person object.
There, we'll save this, switch back
to the browser, and refresh.
So we have a bug here.
It's only showing a comma.
Ah, I see, I used people instead of person.
Jokes on me.
Save again, switch back and reload.
There we go.
And there are all our people.
So now we've finished off our first component.
We've passed through a people prop.
And we've used it to render each of these items
from that array inside a component.