Listening to native events on components

Let's try adding a click event handler on our card:

<card :def="testCard" @click="handlePlay" />

With a dumb method in the main component:

methods: {
  handlePlay () {
    console.log('You played a card!')
  }
}

If you test this in the browser, you may be surprised that it doesn't work as expected. Nothing is output to the console...

This is because Vue has its own event system for components, called "custom events", that we will learn about in a moment. This system is separate from the browser events, so here Vue expects a custom 'click' event, and not the browser one. Thus, the handler method is not called.

To get around this, you should use the .native modifier on the v-on directive, as follows:

<card :def="testCard" @click.native="handlePlay" />

Now, the handlePlay method is called when you click on the card, as expected.