CODEWITHSUNDEEP
vue.js
Cliff Smith
Cliff Smith

Reputation: 45

Vue Font-awesome icon even binding

I have some code that is similar to the Simon game. When used buttons for the arrows everything worked perfectly using the @mousedown event. I wanted to spruce it up a little with font awesome icons but keep the look the same and as soon as I swapped out the <button> for <icon> the @mousedown event stopped firing. Everything else seems to work the same.

From my template:

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

The toneButtonPushed even is here:

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

I have some vague feeling it has to do with how components are imported so I'm including the import statements as well. If you need more code the full project is here. 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
  },

Upvotes: 1

Views: 3624

Answers (1)

Belmin Bedak
Belmin Bedak

Reputation: 9201

It's a bit tricky, because standard events doesn't work on the custom components because when you do something like this:

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

Component is looking for emitted event from another component, It doesn't know that you mean on good, old DOM click event.

One option would be emitting click event from child component, in your case Icon.vue, but that's not the best solution

There is another one, it's .native modifier on event, something like this:

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

By doing this you are saying component that you want to use standard mousedown event from DOM, and It won't look up for emitted one.

Demo: http://jsbin.com/sanivevuxa/edit?html,js,console,output

Upvotes: 5

Related Questions