javascript - Vue : events not working and elements disabled

Question

我是 Vue.js 的新手。我正在尝试从我的孙组件(卡)到子组件(手)以及从手到父组件(主)发出事件:

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

播放事件应触发卡牌播放事件

在卡片组件中，单击卡片时我会发出“播放”事件，然后在我的手组件中我正在监听“播放”事件，以便我可以向父级(主)发出“卡片播放”事件。但事件既没有发出，元素也不起作用(按钮元素被禁用)。

如果我直接在主组件中调用卡片组件，一切都会正常工作，但是当我尝试在它们之间放置另一个组件(手)时，一切都不起作用。

这是我的代码:

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

});

以下是组件:

/* ----- 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>>");
        }
    },
});

我将所有数据保存在 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

给定你的 github 链接，这是我为使其正常工作所做的操作:

首先，CSS 中有一个元素不允许卡片上的单击事件。因此，要正确触发事件，您需要删除 css 文件第 239 行的 pointer-events: none。

然后，您在点击卡片时不需要 .native 事件修饰符:

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

完成这两项更新后，单击卡片时，控制台将显示以下内容:

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

并且卡会根据需要被移除。