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
Start a free Courses trial
to watch this video
We're almost done! Let's add some polish and do a bit of refactoring.
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
Fantastic work so far.
0:00
Before we end the course,
let's add a bit of extra polish, and
0:02
do just a bit of refactoring.
>> We have
0:05
one more item on our to-do list.
0:08
As we discussed before,
we have a slight problem,
0:12
in that users can currently
submit blank cards.
0:15
To fix this, first we'll display an error
if one or both fields are empty.
0:19
Then we'll prevent a new card
from being created if one or
0:23
both fields are missing data.
0:26
As I'm sure you've noticed,
we already have an error message here.
0:28
Now we just need to write code to
control when and why it appears.
0:32
To keep track of whether or
not there's an error,
0:36
I'll create a new property on
the data object called, error.
0:39
This will be a Boolean
that will start our false.
0:42
Now we'll find the error
in our view template.
0:46
And I'll use the v-on directive to say
if error is true, show the span element.
0:48
So if the error property is false,
we won't see the error.
1:00
Error is currently set to false, so if we
look in the browser, the message is gone.
1:04
I'll also open dev tools and toggle
the air property from true to false,
1:09
just to make sure that this
is working as expected
1:14
Great, now we'll go to app.js and
add a conditional to my addNew method.
1:20
So if this .newFront or
this .newBack are empty,
1:39
as in if no characters have
been typed into the field,
1:44
we'll set this.error to true.
1:48
Else, we'll run the code that
creates a new object and
1:55
pushes it into our cards array.
1:58
After we create a new card,
let's set newFront and newBack,
2:05
back to empty strings.
2:09
That way, the fields will go blank
again once the new card is created.
2:24
Finally, we'll set
this.error back to false, so
2:29
that the warning message will go away.
2:32
Let's test this out.
2:34
Great, it works.
2:41
One more thing before we're
finished with this project.
2:43
I wanna show you an alternative
way to display and flip cards.
2:47
Rather than toggle between these two
paragraph tags based on the state
2:51
of card.flip, we can write
an expression within curly braces.
2:55
Let's delete the second paragraph tag.
3:00
In the remaining paragraph,
I'll delete the v-if directive.
3:04
And in curly braces,
I'll write a ternary expression.
3:08
We saw ternary operator
in an earlier video.
3:28
Recall that it's just plain JavaScript,
nothing to do with Vue.
3:31
And it's like a short if statement.
3:35
It looks at an expression, and
3:37
if that expression evaluates to true,
it will run the code before the colon.
3:38
And if it's false, it will run
the piece of code after the colon.
3:43
So it's going to look at card.flipped,
and if card.flipped is true,
3:47
it's going to display
the back of the card.
3:51
And if card.flipped isn't true,
it will display the front of the card.
3:54
To remember how a ternary operator works,
I like to read it as a sentence.
3:59
Almost like I'm asking my code a question.
4:02
Does card.flipped evaluate to true,
if so, do the first thing.
4:06
And if not, do the second thing.
4:09
Let's preview this.
4:13
So you can see that the card is flipping
but the animation is no longer working.
4:20
This is because, as we discussed earlier,
4:25
we're transitioning between two
elements with the same tag name.
4:27
So we need to give Vue a way to keep
track of which element is which.
4:32
Rather than doing this manually,
4:36
we can do that by binding the value
of the key to the value of card flip.
4:38
So here, I can say v-bind:key,
card.flipped.
4:43
Let's look at this again.
4:50
And the card is animating.
4:54
Everything's working great.
5:05
So which way you prefer to do
this is entirely up to you.
5:07
There are always multiple ways
to solve a problem in code.
5:10
And often the way you choose will come
down to the needs of your specific
5:14
project, or simply to personal preference.
5:17
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