Vue.js 2 Web Development Projects

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)        },      },

2. 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 ...