Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
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