Preview

Start a free Courses trial
to watch this video

Getting User Input

Name: Getting User Input
Uploaded: 2018-06-13T07:19:25-04:00
Duration: 262 s
Description: Use v-model to get user input from a form.

4:22 with Treasure Porth

Use v-model to get user input from a form.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

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.

See the Docs: v-model

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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.

You need to sign up for Treehouse in order to set up Workspace

Vue.js Basics

Getting User Input

Related Discussions

Related Discussions