Preview
Video Player
00:00
00:00
Creating a New Card
4:21Use v-model and v-bind together to collect and display information gathered from an HTML form.
We are now successfully getting new
card info from the form inputs,
0:00
so I'll delete that from our to do list.
0:05
Let's break down the next
step of the plan.
0:08
So we want to add a new card when
the user hits Enter or clicks a button.
0:11
To do this,
we'll need to create a method that creates
0:16
a new card object containing
the new card information.
0:22
And we'll need to push that card
object into the cards array.
0:30
In our methods object,
let's create a method called addNew.
0:37
Inside this method,
we'll write some plain JavaScript.
0:44
First, I'll access the cards array.
0:49
Remember, we can do this
by saying this.cards.
0:52
On this.cards, I'll use
the JavaScript array method, push.
0:56
And to the push method,
we can pass a new object,
1:01
with the three properties we need,
front, back, and flipped.
1:05
Which are the three properties of all
the card objects in our card array.
1:11
So we're making a new object literal and
pushing into the cards array.
1:19
But first we need to pass the information
that should be on the front and back.
1:24
Where will we have access to that
information when this method is called?
1:28
We'll have it here on our data object
in these properties that we created in
1:33
the last video.
1:38
Just as we access the cards array,
we can access these values by saying,
1:39
this.newFront and this.newBack.
1:45
The flipped value we
can hardcode to false,
1:48
since we know that we'll want every card
to start off by displaying its front.
1:51
To quickly review, when the user
clicks the Add A Card button,
1:58
we'll call the addNew method.
2:02
This method will look at
the state of newFront and newBack,
2:04
which will contain whatever the user
has typed into the form field.
2:08
We'll then assign those
values to a new object, and
2:13
push that new object into our cards array.
2:16
So let's add the addNew method
2:18
to our template and see if it works.
2:23
To the Add a New Card button, I'll say,
2:29
v-on:click="addNew".
2:34
Now let's fill out the form and
2:41
see if we can create a new card.
2:46
Great, now we can create new cards.
2:54
For added usability, let's allow the user
to submit a new card if they press Enter
3:00
instead of clicking the button.
3:04
We can easily achieve this
by adding another directive.
3:06
Firing an event when the user
presses Enter would usually involve
3:10
writing some kind of
conditional statement.
3:14
If the user presses a key and that key
is the Enter key, then do something.
3:17
With Vue we can use what's
called a key modifier.
3:21
So on the input field for
the back of the card,
3:25
I'll create an event listener, and
specify the event keypress.enter.
3:28
And to that,
I will pass the addNew function.
3:34
So this is a short version of saying,
3:37
when the user has pressed the Enter key,
fire addNew.
3:39
So let's test it out.
3:44
So I'll press Enter, and
we have created a new card, fantastic.
3:47
So we still have a couple
of problems here.
3:53
For example, we can create repeating or
3:57
blank cards simply by clicking
the button over and over again.
4:01
Also, the input fields don't clear
once a new card has been submitted.
4:06
We'll fix those issues in a little while.
4:11
Before that, though, let's add a way for
users to delete a card, and
4:13
then make the cards look like
they're actually flipping.
4:17