[英]Vue: events not working and elements disabled
I am a newbie to Vue.js. 我是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: 我将所有数据保存在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,
//
}
given your github link, here is what I did to make it work: 给定您的github链接,这就是我所做的工作:
First, there is an element in your CSS that disallow click event on a card. 首先,您的CSS中有一个元素不允许卡上的点击事件。 So, to trigger correctly the event, you need to remove the pointer-events: none
, line 239 of your css file. 因此,要正确触发事件,您需要删除css文件的pointer-events: none
,第239行。
Then, you don't need the .native
event modifier on the click on your card: 然后,您在点击卡片时就不需要.native
事件修饰符:
<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. 并根据需要删除卡。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.