- [Instructor] Now we'll see just how easy it is
to respond to a click event
in order to flip our card.
I've removed the text fields that we were using
in the last video,
and also reintroduced our previous logic
where we were checking the value
of the flipped data property.
If we want to allow the user to click anywhere on a card
and have it flipped to show the back,
all we have to do is set up a click handler
on this div,
using the v-on directive.
So v-on:click.
And then for the value, I can add a statement
for what I want to happen.
In this case, I want to toggle the Boolean value flipped.
So we just set it to its opposite.
So now when I refresh,
I can click to flip the card as many times as I want.
v-on also has a shorthand syntax.
And it's an @ symbol instead of the v-on:.
Again, this is very common so we'll be using this form
throughout the rest of the course.
Another thing that's overdue to be addressed
is the fact that we're only loading the first card
in the deck at index zero.
Let's change this to Index
and we'll add a new data property called Index
to keep track of the current index in the array.
So down here, I'll add it after cards.
Index, and we'll initialize it to zero
to show the first card.
Next,
let's add a button to advance to the next slide.
This HTML entity that I'm typing is just a forward arrow.
And I'm going to wrap this in a div with class navigation.
That's just something that's already in my style sheet
that'll help me center this.
Now we'll add a click handler with @click.
And this time,
instead of using an inline statement,
we're going to encapsulate our logic in a method named move.
So then down in my options object,
I'm going to add a key for methods
which takes an object containing the methods.
And we'll add the move method.
So this will just increment the value of Index.
And while we're inside a method,
we could access Index through our app variable down here.
Or we could just say this.Index.
And this will just increment the value again.
One reason that it's nice to use a method
is that it's a lot cleaner
than putting something in the template
if we need to add additional logic here.
For example,
it would be a good idea to reset the value of flipped.
So we see the front of the next card
and not the back as I'm cycling through.
Now, when I refresh,
I'm able to move forward in the deck
and cycle through the cards.
So I named this method move
instead of next or advance
because I knew I wanted to use it to move
in either direction and not just forward.
So up in the template,
notice that I don't need parentheses here
if I'm not passing a parameter.
This is actually calling the method.
But if I created another button
with a left arrow,
then I could pass negative one
or one to indicate the direction I want to move.
Back down here in the method,
I could call this parameter change.
And instead of doing Index++,
I can now do Index plus equals the change.
We should be careful to not go outside
the bounds of our array.
So let's just test,
this.cards
and then this.Index plus change
for a truthy value just to see if that index exists.
Otherwise we won't try to move.
So either way, it will keep our HTML template a lot cleaner
if we keep all of this logic in a method.
So now I have my two arrows.
And I can move both ways.
In the next chapter, we'll take a deeper dive
into how to work with various form controls in Vue.