Vue: events not working and elements disabled

Question

I am a newbie to Vue.js. I am trying to emit an event from my grand-child component (card) to child component (hand) and from hand to parent component (main):

card(emit play event) => hand(listen to play event and emit card-play event) => main(listen to card-play event)

play event should trigger card-play event

In card component, I am emitting "play" event when the card is clicked, then in my hand component I am listening to "play" event so that I can emit "card-play" event to the parent (main). But neither events are emitted nor elements are working (button element is disabled).

If I call card component in my main component directly everything is working fine, but when I try to put another component (hand) between them nothing is working.

Here is my code:

new Vue({
    name: 'game',
    el: '#app',

    data: state,

    template: `
        <div id="#app">

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

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

        </div>
    `,

    methods: {

        testPlayCard(card) {
            console.log('You played a card!');
        },
        handlePlay2() {
            console.log('You played a card!');
        }
    },

    created() {
        this.testHand = this.createTestHand();  
    },

    computed: {
      testCard () {
       return cards.archers
      },
    } 

});

Here are components:

/* ----- CARD COMPONENT ----- */
Vue.component('card', {
    props: ['def'],
    template: `
        <div class="card" :class="'type-' + def.type" v-on:click.native="firePlayEvent">

            <div class="title">{{ def.title }}</div>
            <img class="separator" src="svg/card-separator.svg" />
            <div class="description">
                <div v-html="def.description"></div>
            </div>
            <div class="note" v-if="def.note">
                <div v-html="def.note"></div>
            </div>
            <button>bos</button>
        </div>
    `,
    methods: {
        firePlayEvent: function() {
            this.$emit('play');
            console.log("play event is emitted???")
        }
    },
});


/* ----- HAND COMPONENT ----- */
Vue.component('hand', {
    props: ['cards'],
    template: `
        <div class="hand">
            <div class="wrapper">
                <!-- Cards -->
                <card v-for="card in cards" :key="card.uid" :def="card.def" @play=handlePlay(card) />

            </div>
        </div>
    `,
    methods: {
        handlePlay(card) {
            this.$emit('card-play', card);
            console.log("custom event card-play>>");
        }
    },
});

I am keeping all data in state.js:

// Some usefull variables
var maxHealth = 10
var maxFood = 10
var handSize = 5
var cardUid = 0
var currentPlayingCard = null

// The consolidated state of our app
var state = {
  // World
  worldRatio: getWorldRatio(),

  // TODO Other things
  turn: 1,

  //
  players: [
    { name : 'Humoyun' },
    { name : 'Jamshid' },
  ],

  //
  currentPlayerIndex: Math.round(Math.random()),

  //
  testHand: [],

  //
  activeOverlay: null,

  //

}

Answer 1

given your github link, here is what I did to make it work:

First, there is an element in your CSS that disallow click event on a card. So, to trigger correctly the event, you need to remove the pointer-events: none, line 239 of your css file.

Then, you don't need the .native event modifier on the click on your card:

<div class="card" :class="'type-' + def.type" @click="firePlayEvent">

When those two updates are made, on click on a card, the console shows the following:

custom event card-play>>
ui.js:43 play event is emitted???

And the card is removed as needed.