Nuxt.js: Event handling in different components ($emit and $on)

[thecodr]

I have a very simple use case.
Emit an event in one component and listen to that event in another component.
In component1's methods block, I am using this piece of code

this.$emit('deletedchip')

In component2's mounted block, I am using this piece of code

this.$on('deletedchip', function(){
//Do something
}) 

Event is being emitted but the listener part in component2 is not working. Is there any specific way of dealing this in nuxtjs ?

_{This question is available on Nuxt.js community (#c728)}

[SharadKumar]

You can use a EventHub to listen these events.

--
Sharad

On Jun 7, 2017, at 5:03 AM, thecodr <[email protected][e-mail]> wrote:

I have a very simple use case.
Emit an event in one component and listen to that event in another component.
In component1's methods block, I am using this piece of code
this.$emit('deletedchip')
In component2's mounted block, I am using this piece of code
this.$on('deletedchip', function(){ //Do something })
Event is being emitted but the listener part in component2 is not working. Is there any specific way of dealing this in nuxtjs ?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://github.com/nuxt/nuxt.js/issues/849, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFO-EB4NJJ41IjlVQe019ex7OZU61GHxks5sBaJ4gaJpZM4NxxnZ.

[piyushchauhan2011]

Are the two components - component1 and component2 are defined under pages directory ? @thecodr

[thecodr]

@piyushchauhan2011 Yes. Both the components are defined under pages directory.
@SharadKumar Do you have any reference to EventHub usage in nuxtjs please ? That would really help. At the moment I could find EventHub npm package but I am not sure if we were talking about the same eventhub.

[tforssander]

@thecodr Check out Understanding Components Communication in Vue 2.0 on how to create an eventHub that @SharadKumar is talking about.

[thecodr]

I followed that tutorial and here is my code
I created a plugin
* Event Hub Plugin *

import Vue from 'vue'
export default new Vue()

Component 1

import eventHub from '~plugins/event-hub'
export default {
  methods: {
    inputChanged () {
        eventHub.$emit('removeposition', { something: 'yes' })
      }
    }
  }
}

Component 2

import eventHub from '~plugins/event-hub'
export default {
  props: ['filter'],
  data () {
    return {
      position: {
        value: 100
      }
    }
  },

  mounted () {
    eventHub.$on('removeposition', function (filter) {
      console.log('I am listening : ', filter, this.position.value)
    })
  },

  }
}

I am not able to access this.position.value in the component. The following error is thrown
Uncaught TypeError: Cannot read property 'value' of undefined

Am I missing something here ?

[pi0]

@thecodr The problem is that you may have to bind filter function to this instance:

   eventHub.$on('removeposition', (function (filter) {
      console.log('I am listening : ', filter, this.position.value)
    }).bind(this))

Or simply use arrow functions to keep context:

   eventHub.$on('removeposition', filter => {
      console.log('I am listening : ', filter, this.position.value)
    })

[pi0]

Also about event hub pattern, there won't even needed an extra plugin. As i remind somewhere in Vue docs it is advised to simply use top most component as eventHub, Like this:

// Input changed
this.$root.$emit('removeposition', { something: 'yes' })

// Component 2
this.$root.$on('removeposition', filter => { })

[thecodr]

@pi0 That solved my problem. @SharadKumar @piyushchauhan2011 @tforssander Thanks all for your help.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.