I have a "card" component with many "faces".
Click the card and it shows another face.

<template lang="pug">
  .infini-card(@click.prevent="clickCard")
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>

The ".infini-card" div has a click handler and I can do a switch() there to process changes for all the different kinds of faces. Cool.

But, the first thing I tried didn't work:

<template lang="pug">
  .infini-card
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData" @click.prevent="clickSecret")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>

The clickSecret() method is never called on the v-if'd face. This component is instantiated in another pug template like this: infini-card(v-bind.sync="cardA")

Why? :-)

Thanks in advance!

1 Answers

0
camaulay On

Note that @click works differently for native elements vs vue components.

On a native component (<div>, <button>), @click listens for the a click event.

On a custom component (<infini-card-secret>), @click listens for a event emit 'click' from that custom component (this.$emit('click'))

  • To make sure @click listens for the native click event on custom components, use the .native modifier, like this:
    • @click.native="clickSecret".

Vue Docs: Binding Native Events to Components