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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Let's outline how to accomplish this project, and review how to loop through and display data.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Lets build a Flashcards App.
0:04
To get started,
we'll look at the finish project and
0:06
roughly plan what we need to accomplish.
0:09
Here is the app we will be building
in this part of the course.
0:11
The user create Flashcards
by providing information
0:14
about what should be on the front and
the back of the cards.
0:17
A new card is created when user
clicks the button or presses Enter.
0:20
The user can flip the cards back and
forth as well as delete the cards.
0:24
If the user clicks Add a New Card or
presses Enter while one or
0:31
both input fields are blank,
they get an error message.
0:35
We're starting off with an index.html,
app.js, and styles.css file.
0:38
In app.js we have some predefined data
to use with our app as we build it,
0:44
an array with several card objects.
0:49
Each card object has three properties,
front, containing data for
0:51
the front of the card.
0:56
Back containing data for
the back of the card,
0:58
as well as a property we'll use to
keep track of when the card flips.
1:01
In a real world app, you might get this
data from an API or a database, but
1:05
for now mock data will do just fine.
1:10
We also have a Vue instance
that's mounting to
1:13
an HTML element with
an ID of flashcard-app.
1:16
A data property called cards is
set to our array of card objects,
1:20
which is also called cards.
1:25
Finally we have some HTML and CSS,
1:28
providing some basic structure and
styling for our app.
1:30
Our job will be to enhance the template
with the knowledge we've learned
1:35
about vue.js so far.
1:39
Let's start by breaking down what we
need to do into manageable steps.
1:40
We're gonna go right here above our Vue
instance and start creating a list.
1:46
First we'll want to display our data.
1:50
We want to take our info from this cards
array, and display it on the page.
1:54
Then we'll wanna flip the cards back and
forth on click.
2:00
Then we'll wanna get info for
new cards from the user.
2:07
We'll need a way to add a new card when
a user hits Enter, or clicks a button.
2:13
We'll need a way to delete cards.
2:23
We'll want to animate the card flip.
2:26
And finally,
2:31
we'll want to display an error message
if the form fields are left blank.
2:32
Great, so let's work on displaying
the cards that we currently have.
2:36
A lot of this is review so
I'll go through it pretty quickly.
2:39
Before I do, however,
I encourage you to pause the video,
2:43
go to the Vue template, and see if you can
use the v-for element on this list item,
2:47
to loop through the array of card objects.
2:52
To the list item,
I'll add a v-for directive.
2:57
Inside, I'll tell Vue I wanna
loop through the carts, and
3:01
I'll refer to each
individual item as card.
3:04
Between the first paragraph,
I'll display card.front.
3:09
And between the second paragraph
I'll display, card.back.
3:14
Let's take a look at this,
first I will close our example and
3:19
refresh and our data is displaying
correctly, which is good.
3:24
Note that our paragraph tags have
some predefined CSS styles so
3:30
they actually appear as cards.
3:34
Our problem now is that
we're seeing the front and
3:36
back of the cards at the same time.
3:39
On each card we have this flip property.
3:43
What directive would allow us to
conditionally display the front or
3:48
back of the card based on whether
flip evaluates to true or false?
3:52
If you guess v-show or v if, you are
correct, so we could do one of two things.
3:56
We could put v show on each card.
4:02
Then we could say show the front of
the card if card flipped is false and
4:07
show the back of the card
If card flip is true.
4:13
This should work fine,
let's refresh and open up Dev tools.
4:20
And if I open up one of the card objects
and toggle the flipped property on and
4:27
off, You can see it switch
4:33
between the info on the front and
the info on the back of the card.
4:38
We can also use the v-if directive with
the directive we haven't talked about,
4:42
called v-else.
4:46
This works very much like
a conditional statement in JavaScript.
4:47
So we can say v-if and
all we need here is v-else.
4:54
In this case,
v-else doesn't need an argument,
4:58
because what we're saying here is,
if the value of card.flipped is false,
5:01
show the first paragraph,
and if not, show the second.
5:06
Let's save this, and go back to DevTools.
5:10
Refresh and
toggle flipped on and off again.
5:14
You can see this works in the same way.
5:21
Recall that v-show is preferred for
frequent toggling,
5:24
as we read in the documentation
earlier in this course.
5:27
However, v-if is preferred if we have
an alternative piece of template we
5:30
wanna show.
5:35
As in this case,
we wanna show one paragraph or the other.
5:36
Keep in mind, as well, that v-if and
5:39
v-else work together only
if they're consecutive.
5:41
In other words,
I couldn't put an element between them,
5:44
the conditional would no longer work.
5:47
The elements you use these directives
on must be one after the other.
5:50
Okay, now we're able to flip the cards
manually by toggling the flip property on
5:56
and off.
6:00
Now we need to attach this
behavior to an event, namely,
6:02
when the user clicks anywhere on the card.
6:05
We're gonna use almost identical
logic as we did to open and
6:10
close parts of the accordion menu
in the last part of the course.
6:13
On the list item,
I'll create a v-on:click directive.
6:17
And I'll pass in a method
called toggleCard.
6:26
Into this function,
I'm going to pass card as an argument.
6:29
So here we're saying, for
card in cards, so by passing card here,
6:34
I'm referring to whatever card
that has been clicked, so
6:39
Vue will know which particular
card in the list to flip.
6:42
Now I'll save this, go to app.js and
6:47
create a method called
toggleCard in my methods object.
6:50
Here I'll pass in the card.
7:03
And inside of toggleCard,
we'll do what we've done before.
7:06
We'll set card.flipped = !card.flipped.
7:09
In other words, if card.flipped is true,
unclick, it will change to false,
7:17
and if card.flipped is false,
unclick it will change to true.
7:22
Now if I save and refresh the preview,
7:26
I can click on any card and
toggle between the front and back.
7:30
It's not animated yet
but we're on our way.
7:35
Now we can delete the first two
items off of our to do list.
7:38
Next we'll learn about a new Vue directive
that will help us capture form data and
7:45
use it to create new flashcards
7:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up