Vue $emit and @click handler behaving differently on Firefox

Viewed 848

New to Vue and wrapping my head around the main concepts.

I currently have two separate components BodyHero.vue and SelectedHero.vue that I need to pass data from BodyHero.vue to SelectedHero.vue. Since there isn't a parent-child relationship between them I've set up a simple EventBus.

import Vue from 'vue'
export const EventBus = new Vue()

I've set up a simple emitter to pass information from BodyHero.vue to SelectedHero.vueupon click on router-link. (I'm using vue-router to route pages and the routes work appropriately - upon click the user is taken from BodyHero.vue to SelectedHero.vue.)

This is a portion of BodyHero.vue:

<template>
 <div class="columns" style="margin: 0px 10px">
  <div v-for="cryptoCurrency in firstFiveCryptoCurrencies" class="column">
    <router-link to="/selected" @click.native="selectCryptoCurrency(cryptoCurrency)">
      <div class="card">
        <div class="card-image">
          <figure class="image is-4by3">
            <img :src="`/static/${cryptoCurrency.id}_logo.png`">
          </figure>
        </div>
        <div class="card-content">
          <p class="title is-5">{{ cryptoCurrency.name }}</p>
        </div>
      </div>
    </router-link>
  </div>
 </div>
</template>

<script>
import { EventBus } from '../../event-bus.js'
const cryptoCurrencyData = require('../../cryptocurrency-data.json')

export default {
 props: {},
 name: 'bodyHero',
 selectCryptoCurrency (cryptoCurrency) {
  EventBus.$emit('cryptoCurrencySelected', cryptoCurrency)
}

And in SelectedHero.vue, upon created I listen for the emit.

 created () {
  EventBus.$on('cryptoCurrencySelected', cryptoCurrency => {
   ...
  })
 }

Now for the weird part. Chrome/Safari everything seems to work fine - the user is routed to the next component, the emit is successfully called and the cryptoCurrency object is appropriately passed.

For Firefox however, it appears that the EventBus.$emit('cryptoCurrencySelected', cryptoCurrency) doesn't seem to fire upon click (@click.native). So the user is directed to the next screen - and the object is empty. Not sure what's really the issue here or if I'm missing something. Would be happy to hear other opinions!

0 Answers
Related