- [Instructor] In this video we're going to bind
a form element to some viewed data
and watch it stay updated automatically.
In View, form elements, in an instance are expected
to get their values from View.
That is, your JavaScript data is the source of truth,
not whatever is in the DOM, once set up correctly,
View keeps the DOM up to date for you automatically
with however your data changes, this is like
controlled forms in React, if you've ever used those.
We're going to add the selected size to our viewed data
and get it updating on the page.
So, right now, of course, the initial selection
is whatever the first size is in the Select box.
So, we're going to change it to something else.
Switching over to my editor, I'm going to add selected size
to the data, I'm just going to do this
so we don't see the word size this small
over and over again, so selected size
and I'll make it size nine and I'll save that.
Now, back over here in my template,
I need to tell the Select box that it needs
to get its value from selected size.
I'm going to copy this and the way this works in View,
is with another custom directive, V-Model.
So, again it looks like a custom HTML attribute.
And what I do, is I paste in the key from my data object
that contains the value that the Select box
needs to have, so I'll save that
and switch to the browser and take a look.
Let's refresh and first of all,
I can see that my size is now nine.
I'm going to open up the DevTools with command option I
and switch over to the View tab.
And I'll scroll this into view.
So, selecting the root component,
I can see that my selected size is nine.
Lets change this to eight and a half, 10, 11, and so on.
The data is keeping up to date here.
And indeed, if I were to update this, the form updates.
Now that we have data, and it can change, we can reuse it.
Now, simply keeping a single form field up to date
might not seem like the most interesting thing,
but the nice thing is that once you have that data,
you can reuse it another places, too.
So, back here, let's reuse this selected size
in here under the product image.
Let's add a paragraph with a class of product caption.
And of course, I'm using the Emmet abbreviation expander
here in Visual Studio Code, so I can just type it
out like this and hit Tab and it creates
the paragraph for me, and I can say
selected size is selected size.
Again, I'm just referring to the data that
are coming from my View Instance.
I can save this, switch back to the browser again
and refresh, so my selected size is nine here and nine here.
If I change it, it's changing here
in the caption automatically, and I'm just doing this
with Mustache tags, this is not the only way to insert text
or HTML as the content of a tag in your templates.
You can also use the v-html and v-text directives.
Usually, when you're going to insert some static text
followed by something that's dynamic,
you'd do it this way with the Mustache tags,
but you can look up those other directives
in the documentation if you might need them.
So, now our form is tracking the currently selected size
and we can reuse it however we need to.