Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Use v-model to get user input from a form.
In this video we use v-model to gather data from a text input field, but v-model can be used to get input from other form input fields such as textarea, checkbox, radio buttons and more.
We've tackled two items on our to do list.
0:00
We're displaying some fine looking
cards that toggle back and
0:03
forth between some
interesting information.
0:05
Next step, get the info for
our new cards from the user.
0:09
So how do we get
information from the user?
0:13
If you're used to using jQuery or
JavaScript,
0:15
it might be tempting to
select these input elements.
0:19
And save them to variables so
we can start learning event listeners and
0:26
accessing their values and so on.
0:30
Instead, we're gonna learn about
another vVue directive, Vue model.
0:32
Let's put Vue model on one of our
inputs and discover how it works.
0:37
With v-model we can bind a form field
to a property on our data object.
0:43
I'll show you what I mean.
0:48
In the quotes,
0:50
I'll tell v-model which property I wanna
buy into, let's name it test for now.
0:50
Now I'll create a property
called test on my data object.
0:57
Remember, any property on the data object
must start with some initial value,
1:06
so I'll set it to an empty string.
1:11
Here's where the magic happens.
1:13
Let's save and open up Vue dev tools.
1:15
Watch what happens when I type into the
input field where I've placed the v-model
1:24
directive.
1:28
Anything I type into the input field
1:30
becomes the value of
the property I've bound it to.
1:32
So I'm saying, hey Vue,
whatever is inputted into this field,
1:37
bind that info to a property called test.
1:42
Kind of like saving the value
of the input to a variable.
1:45
Pretty awesome, right?
1:48
I'm now free to use this
property in my template.
1:50
And Vue will make sure that the value
stays updated in real time.
1:52
Using mustache syntax,
add the test property to the template.
1:59
We'll add it here between
the heading one tag.
2:04
Now, as I type,
the text appears immediately on the page.
2:14
Note that this also goes two ways.
2:21
In other words I can type a message
directly into the test property.
2:23
The info populates in the form field
which then prints to the H1 element.
2:34
I'll go ahead and
undo this now that we've tested it out.
2:39
How can we use v-model to
collect what the user has typed?
2:46
To think through this,
2:49
let's break down the first step in
our plan into even smaller steps.
2:50
So we need to get info for
new cards from the user.
2:56
To do that first we need to create
data properties for the front and
3:00
back of the card.
3:04
Then we need to bind those properties
to the form using v-model.
3:09
So in my Vue instance I'll create two new
properties called newFront and newBack.
3:17
And I'll set them to empty strings for
now.
3:29
I'll add two v-model directives
to my two input fields,
3:32
binding them to those properties.
3:36
Let's save this, refresh, and
look at Vue dev tools again.
3:50
Try typing something
into one of the fields.
3:56
I am now successfully collecting
the information I need to create a card.
4:10
Now, how do we capture this information
and make a new card with it?
4:15
Let's figure that out in the next video.
4:19
You need to sign up for Treehouse in order to download course files.
Sign up