- [Male Narrator] In this video we're going to
build out the template for the filters component.
Where we'll see how the component data is
a little bit different from the data in the root instance.
So right here I have my empty form,
so I'm going to steal some mark up from the mock-up.
Put it in here and do some reformatting.
I'm just going to group all these fields into a single one,
and there's not a lot to do
with any individual form field here.
As your forms get larger you might
consider breaking them up into some child components,
we don't really need to do that here.
So back here in my editor
I'm going to be swapping out this template.
So let's switch over here to this mock-up dot html.
Going to jump down with Ctrl + g
to line 122.
It looks good, I'm just going to steal all the
mark up that defines this form.
Now switch back to directory dot js.
We're going to do this template a little
differently than we did the previous one.
I'm going to use a ES6 feature called template literals,
which are delimited by back ticks.
(keyboard clicking)
Like that.
You can see I can paste everything in there
and it's completely valid.
This is way more convenient than doing
the more compatible version with back slashes
at the end of each line.
But unfortunately it is not compatible
out of the box with any version of internet explorer.
So if you're going to use this approach
and you're targeting those browsers,
as probably most of us still should be
you're going to need to trans pile this
with babble or do a conversion manually.
But for now I'm going to use this feature just
to show how these ES6 template literals work
and because, oh man it is so much more convenient.
So as far as data goes,
I need to pull out the data for each of these job titles
Which if I jump down to the bottom of my data file,
is here in a key called titles.
So I could try to iterate over these,
using option v-four.
Set it up like this
and I could try and access window dot
LM Directory dot titles,
but that doesn't work here.
I need to access component data here somehow.
So first let's do it using data.
Now the way data works inside a component
is a little different, you don't just define a plain object.
If you did that then every instance of this component,
if you were creating more than one,
would end up sharing the same data,
that's not going to to work,
so we need to scope it using a function.
As you may recall functions and java script create
their own scope, so using a function here is what
Vue wants you to do,
and what happens inside this function is
we return the object that we would have otherwise
just defined as a simple object inside our root instance.
So in this case I'm going to use the titles
from window dot L M directory dot titles.
Once I've done that I have access to it down here,
just as titles.
So I could say title in titles,
then what I need to do is use the display key
for what's displayed inside the option
and the key will be used as the value.
So we'll set up our mustache tags first,
this will be title dot display.
And then the value will be found as title dot key.
And now I can get rid of all these hard coded options,
and because my data doesn't have an empty selection
Vue recommends you keep an empty selection like this,
for compatibility with certain mobile browsers especially.
Because I don't have one of those to find in my data
I'm just going to leave this hard coded bit
of html along side my V 4.
So this will work fine,
I'm going to save this,
switch back to the browser,
and reload my index dot html.
Here are all of my titles.
But when I have things inside
my data object they become reactive data,
the expectation is that at some point,
these titles might change,
but really all I'm doing is feeding these into my template,
they're not going to change at any point.
So there's other ways to do this as well,
one way is to create a custom key,
which I could call titles.
Vue doesn't define anything called titles.
And set that to the same data.
Once I've done that, instead of iterating over
titles which comes automatically from data.
I can use a special internal value
called dollar sign options.
That will refer to any other custom options that
I pass in which is not other wise claimed by Vue.
Doing it this way means that Vue
doesn't have to consider how
these might change at any point.
So I could get rid of this data function if I wanted to.
But because these data don't need to be reactive,
I'm going to leave my custom option.
Save again, go back and reload,
still working, wonderful.
So now we've built out the template for the filter form
it doesn't do anything interactive yet
but we can get to that next.