We've tackled two items on our to do list.

We're displaying some fine looking cards that toggle back and

forth between some interesting information.

Next step, get the info for our new cards from the user.

So how do we get information from the user?

If you're used to using jQuery or JavaScript,

it might be tempting to select these input elements.

And save them to variables so we can start learning event listeners and

accessing their values and so on.

Instead, we're gonna learn about another vVue directive, Vue model.

Let's put Vue model on one of our inputs and discover how it works.

With v-model we can bind a form field to a property on our data object.

I'll show you what I mean.

In the quotes,

I'll tell v-model which property I wanna buy into, let's name it test for now.

Now I'll create a property called test on my data object.

Remember, any property on the data object must start with some initial value,

so I'll set it to an empty string.

Here's where the magic happens.

Let's save and open up Vue dev tools.

Watch what happens when I type into the input field where I've placed the v-model

directive.

Anything I type into the input field

becomes the value of the property I've bound it to.

So I'm saying, hey Vue, whatever is inputted into this field,

bind that info to a property called test.

Kind of like saving the value of the input to a variable.

Pretty awesome, right?

I'm now free to use this property in my template.

And Vue will make sure that the value stays updated in real time.

Using mustache syntax, add the test property to the template.

We'll add it here between the heading one tag.

Now, as I type, the text appears immediately on the page.

Note that this also goes two ways.

In other words I can type a message directly into the test property.

The info populates in the form field which then prints to the H1 element.

I'll go ahead and undo this now that we've tested it out.

How can we use v-model to collect what the user has typed?

To think through this,

let's break down the first step in our plan into even smaller steps.

So we need to get info for new cards from the user.

To do that first we need to create data properties for the front and

back of the card.

Then we need to bind those properties to the form using v-model.

So in my Vue instance I'll create two new properties called newFront and newBack.

And I'll set them to empty strings for now.

I'll add two v-model directives to my two input fields,

binding them to those properties.

Let's save this, refresh, and look at Vue dev tools again.

Try typing something into one of the fields.

I am now successfully collecting the information I need to create a card.

Now, how do we capture this information and make a new card with it?

Let's figure that out in the next video.