- [Instructor] In this video, we're going to wire up
the filter form fields, so they track the current values
and look at an available modifier for v-bind.
So I need to set up these form fields
so they're going to track the data.
And I want to note that between the end of the last video
and this one, I reformatted this template,
so it uses the backslash notation instead of the
ES6 template literal, so I won't leave any IE users behind.
Anyway, what we need to do is get the values
of these fields into our data object up here.
So I need a name, a job title, and a flag to track
whether this person is an intern,
so we're going to add those to our data object, and I'm
going to put them all in a single object called search
just so I can put them all together.
I could have personName, job title, and so forth,
but I think it's cleaner to just put it all in one object.
So inside that, we'll have a name,
which will start out as blank,
a title, which will also start out as empty,
and then intern will start out as not checked,
which would be a value of false.
Now each of these inputs is going to need a v-model
just like we've done before, so this will be
v-model=search.name for the name field.
And I'll copy this, bring it down to the select box.
This will be search.title,
and then for the checkbox, this will be search.intern.
We don't actually care about the
value here because it's a checkbox.
We just want to know if it's checked or not,
so tracking the value of true or false will do fine for us.
You can look up the view documentation
for how to track v-model on check boxes
if you need to do something more sophisticated
where the value might actually be important.
Vue is quite flexible with what it can do
with these different input types,
but for the basics, it's also very simple.
This is one area where if you've ever
used React before, this can make React look
way overcomplicated with its controlled forms.
I mentioned this before, but I
want to mention it one more time,
which is that your select boxes need to have
some sort of empty value available for compatibility,
so we're starting out with a title that's an empty string,
and because that's not in the data object
that we're iterating over, which is the directory.titles,
we're just including a hard-coded empty value here.
Okay, I'll save this.
We'll go back and reload.
I'm going to open up the developer tools with cmd + opt + i
and switch to the Vue tab.
Now here are my directory filters.
Here is my object, and I'm going to stop typing something.
BBBBBBBB, that's updating the name.
Job title is changing for these various values,
and the intern flag is tracking whether it is true or false.
Great, this is all working.
So what if somebody adds a bunch of white space
to the front of the string or to the back?
This could cause issues with searches
or filters, depending on how you have
your searching and filtering set up.
But Vue has you covered. Back over here, I can add a
modifier to this v-model attribute.
If I add .trim here,
and save this, I'll switch back and we'll reload.
I'm going to keep the developer tools open,
reselect the directory filters, and now
if I start typing some white space
at the beginning of this, nothing happens.
Vue is automatically stripping that white space out
as far as what it's tracking in the data.
Of course, the white space still shows up here
in the browser, but that does not matter.
So there we go.
My strings will be clean on both ends.
There are several modifiers
available for different input types.
So you can check out the Vue
documentation on those for more.
So now we've wired up these form fields
so they track the values, and you've seen how the trim
modifier works to keep white space out of your inputs.