Vueフォント - すばらしいアイコンもバインド

Question

私はSimonのゲームに似たいくつかのコードを持っています。矢印のボタンを使用すると、@mousedownイベントを使用してすべてが完全に機能しました。私はフォントの素晴らしいアイコンでそれをほんの少し上にしたいと思ったが、外観を同じに保ち、<button><icon>のために<button>をスワップすると、@mousedownイベントは発砲を停止した。他のすべては同じように動作するようです。私のテンプレートから

：toneButtonPushedもここにある

<div id="top-row"> 
    <icon name="arrow-left" class="but-0" v-bind:class="{ active: pushed0 }" aria-hidden="true" @mousedown="toneButtonPushed(0)"></icon> 
    <icon name="arrow-left" class="but-1" v-bind:class="{ active: pushed1 }" aria-hidden="true" @mousedown="toneButtonPushed(1)"></icon> 
</div> 

：

methods: { 
    toneButtonPushed: function (buttonPushed) { 
     console.log('hit') 
     if (this.compTurn === false) { 
     if (buttonPushed === this.compTones[this.playerTone]) { 
      const toneName = 'simonSound' + buttonPushed.toString() 
      this.$refs[toneName].play() 
      if (this.playerTone === this.compTones.length - 1) { 
      if (this.compTones.length === this.winLevel) { 
       this.msg = 'YOU WIN!!!!' 
       setTimeout(() => { 
       this.initGame() 
       }, 2500) 
      } else this.toggleTurn() 
      } else { 
      this.playerTone++ 
      } 
     } else { 
      if (this.strict === true) { 
      this.$refs.wrong.play() 
      this.initGame() 
      } else { 
      this.$refs.wrong.play() 
      this.compTurn = true 
      this.showTones() 
      } 
     } 
     } else { 
     this.$refs.wrong.play() 
     } 
    }, 

私はそれはコンポーネントがインポートされているどのように私はimport文を含めてるとしなければならないいくつかの漠然とした感覚を持っています同じように。より多くのコードが必要な場合は、完全なプロジェクトがここにあります。標準イベントはカスタムコンポーネントでは動作しませんので、https://github.com/CliffSmith25/simon

import Icon from 'vue-awesome/components/Icon.vue' 

export default { 
    name: 'app', 
    data: function() { 
    return { 
     compTones: [], 
     playerTone: 0, 
     compTurn: true, 
     intervalID: '', 
     strict: false, 
     winLevel: 20, 
     pushed0: false, 
     pushed1: false, 
     pushed2: false, 
     pushed3: false, 
     msg: '' 
    } 
    }, 
    components: { 
    Icon 
    }, 

Answer 1

それは、少しトリッキーですので、あなたはこのような何かをするとき：

<mycomponent @click="method"></mycomponent> 

コンポーネントが別のコンポーネントから放出されたイベントを探している

、それ良い、古いDOMクリックイベントの意味を知らない。もう一つはあり

1つのオプションは、あなたのケースIcon.vueには、子コンポーネントからのクリックイベントを発することになるが、それは最善の解決策

ではありません、それは、イベントでこのような何か.native修飾子です：

<div id="top-row"> 
    <icon name="arrow-left" class="but-0" v-bind:class="{ active: pushed0 }" aria-hidden="true" @mousedown.native="toneButtonPushed(0)"></icon> 
    <icon name="arrow-left" class="but-1" v-bind:class="{ active: pushed1 }" aria-hidden="true" @mousedown.native="toneButtonPushed(1)"></icon> 
</div> 

これを行うと、DOMからの標準的なマウスイベントを使用したいコンポーネントがあり、放出されたものを検索しません。

デモ：http://jsbin.com/sanivevuxa/edit?html,js,console,output