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
In this video, we'll write JavaScript inside of a Vue directive to add functionality that deletes a card.
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
We have just a few items
left on our master plan.
0:00
Next up, delete cards.
0:04
So when the user clicks on
the x on any given card,
0:06
we need an event to fire that deletes
that card from the cards array.
0:10
We'll use the splice method to find and
delete whatever card we've clicked on.
0:15
To do that, we'll first need
to get the index of the card.
0:20
In the view template, let's go to where
we're looping through the cards array.
0:25
In parentheses,
we'll change this to card and index.
0:31
Recall that index is an optional
argument for the v-for directive.
0:37
So this is how we can access
both an individual card and
0:41
the index of that card.
0:44
We wanna delete a card when this
delete-card span is clicked.
0:47
So to it, I'll add a v-on directive.
0:53
And in it, we'll use the splice method,
passing it the index of the current card.
1:00
If you're unfamiliar with splice, or
it's been a while since you've used it,
1:10
all I'm saying here is go to this index
in the array and delete one item.
1:14
So if I go to the third card and click
on it, it will go to that card's index,
1:19
which is two, and
delete one item, which is itself.
1:24
And we'll want the user to be able to
click on the x on either side of the card.
1:27
So I will also put this event on
the span for the back of the card.
1:32
Alternatively, I could put this logic into
a delete card method on the view instance.
1:38
And that would accomplish the same thing.
1:44
Let's test this out in the browser.
1:47
And we can delete cards.
1: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