Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Deleting a Card1:53 with Treasure Porth
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 up