- [Instructor] In this video,
we'll solve the problem of not being able to flip the card
now that it's in its own separate component.
One solution could be to set it up as a data property,
just like we do with our route instance.
Child components can also have their own data
and it can be copied from props.
So, we could set up a data property.
We wouldn't use the name Flipped
because that's already being used for the prop,
but we can call it isFlipped,
and then we could use Flipped as the initial value.
And then, we could update our template to use isFlipped
and just manipulate that value as necessary.
But we'll be better off if we continue
to let the parent have complete control
over this property and that's so
that we can make sure we're always resetting Flipped
to false as we cycle through the cards
in the parent component.
We don't want both components to be able
to change this value as that will get confusing to debug.
So instead of changing the value when we click,
as we're doing here, we're instead going to just raise
or emit an event, alerting the parent component
that the user has clicked on the card.
So to do that, we just call dollar sign emit,
and pass an event name, which I'll call it Flip.
- And the dollar sign is used there just
to make it less likely that you'll write a method
with a name that collides with this one.
And this is where these string templates get
a little bit messier because we now have
to escape the quotes around Flip, if you noticed.
But what this allows us to do is
to handle an event called Flip in our root instance now.
So, in the flashcard tag,
just like we're using at click elsewhere,
we can now use at flip and put our flip logic there.
And all we have to do is say flipped is
the negation of flipped.
So now if we go back to the browser and refresh,
that warning is gone and we can flip our cards again.
But remember, I mentioned
that a child component can't access methods on the parent,
so we'll see an error if we try to click
Got It or Again and actually,
we already see errors about Got It and Again
being accessed but not defined.
So let's see if we can fix that now.
First, when a tag and all its attributes starts
to grow like this,
it's usually better to put each attribute
on a separate line.
So, maybe something like this.
And some people actually like to put
the closing angle bracket on its own line,
or maybe do that.
It's all really a matter of personal preference.
Okay, so back to Got It and Again.
Same as with the card click,
we'll emit events instead of trying to call methods
or manipulate any parent data.
So I'm going to just call these events
yes and no,
because those names are short and sweet
and it will also allow us to avoid any possible issues
with case sensitivity.
So then, back in our flashcard tag
we can handle a yes event
by calling our Got It method,
and handle the no event by just calling Again.
So finally, when I refresh, I don't see any errors.
I can click Got It, Got It, Again,
and I can cycle through the cards
and everything seems to be working.
In the next video, we'll look
at a feature of components called slots
which we use for managing dynamic content of a component.