Playing a card

Now, we need to handle the 'play' event in the hand component we emit in the cards when the user clicks on them, and emit a new 'card-play' event to the main component with an additional argument--the played card in question.

1. First, create a new method called handlePlay. It takes a card argument and emits the new event to the parent component:

      methods: {
        handlePlay (card) {
          this.$emit('card-play', card)
        },
      },

1. Then, add a listener to our cards for the 'play' event:

      <card v-for="card of cards" :def="card.def" 
      @play="handlePlay(card) />

As you can see here, we directly use the iterator variable card of the v-for loop. That way, we don't need the card component to emit its card item since we already know what it is.

To test the card play, we will only remove it from the hand for now.

1. Create a new temporary method called testPlayCard in the main component in the main.js file:

      methods: {
        // ...
        testPlayCard (card) {
          // Remove the card from player hand
          const index = this.testHand.indexOf(card)
          this.testHand.splice(index, 1)
        }
      },

1. Add the event listener for the 'card-play' event on the hand component in the main template:

      <hand v-if="!activeOverlay" :cards="testHand" @card-play="testPlayCard" />

If you click on a card, it should now emit a 'play' event to the hand component, which will then emit a 'card-play' event to the main component. It will, in turn, remove the card from the hand, making it disappear. To help you debug this sort of use case, the devtools have an Events tab: