- In this video, we'll take a look at a
very simple HTML form,
and talk about how to manage text fields using Vue.
In my code editor, you can see
that this is indeed a form element with an input
of type text and then a text area for lengthier input.
And then below we have the submit button.
Our view app is created the same way as before
and I'm starting with a data object that has only
the deck name property for now.
So we've already seen that we can use v-bind value,
or the shorthand version, just colon value
to pre-populate a text field with a given value.
And remember that value could be a data property,
or a JavaScript expression.
Or even something like
math dot random.
So let's use deck name instead.
And if this were an existing flashcard deck
that we were just editing, it might be perfectly
fine to preload that value,
and then just use a traditional
form submission to update it.
But if we did that,
why would we bother using Vue at all in that case?
Because it's still might help us manage some
dynamic behavior that we want to add.
For instance,
I might want to display the length of this value here.
So inside double curly braces
I could say deck name dot length,
and then the word characters after.
So this shows us that the current value is
19 characters long.
The only problem is that it doesn't change when
I edit the fields.
And that's because we haven't set up
that two way data binding.
We've used Vue to render a text field
with a dynamic value,
but we haven't told it to update
the data property when the input changes.
To do that remember, we need to use the
v-model directive,
instead of a dynamic value.
So now that we see,
as I remove characters
or as I type more,
we're writing the new value
to our view instance with every keystroke
and updating the UI accordingly.
V-model and colon value
work the same way with the text area.
So if you're familiar with text areas,
you know that a pre-populated value usually goes
between the text area tags.
You should avoid doing that when using Vue.js,
even though it might seem to work in some cases.
But usually we want that two way data binding,
so we should use v-model anyway.
Let's add a property called deck description.
And then I'll add it to my
data object initialized to an empty string.
Of course,
a more typical example of counting
the length of an input would be to indicate a limit.
So if our limit for deck description were say,
200 characters,
then we could add the curly braces here
and say,
200
minus deck description dot length.
And we could say that
that many characters are still available,
or that many characters are left.
So now if I refresh again, as I type
you can see that number being updated on the fly.
So that should give you a good introduction
to managing text fields with Vue.
Next, we'll take a look at check boxes.