New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event handling in different components ($emit and $on) #849

Closed
thecodr opened this Issue Jun 6, 2017 · 9 comments

Comments

Projects
None yet
6 participants
@thecodr
Copy link

thecodr commented Jun 6, 2017

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

This comment has been minimized.

Copy link

SharadKumar commented Jun 6, 2017

@piyushchauhan2011

This comment has been minimized.

Copy link

piyushchauhan2011 commented Jun 7, 2017

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

@thecodr

This comment has been minimized.

Copy link
Author

thecodr commented Jun 7, 2017

@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

This comment has been minimized.

Copy link

tforssander commented Jun 7, 2017

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

@thecodr

This comment has been minimized.

Copy link
Author

thecodr commented Jun 8, 2017

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

This comment has been minimized.

Copy link
Member

pi0 commented Jun 8, 2017

@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

This comment has been minimized.

Copy link
Member

pi0 commented Jun 8, 2017

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

This comment has been minimized.

Copy link
Author

thecodr commented Jun 8, 2017

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

@alexchopin alexchopin closed this Jun 8, 2017

valeriosillari added a commit to valeriosillari/zitronenstrasse that referenced this issue Jan 23, 2018

@lock

This comment has been minimized.

Copy link

lock bot commented Nov 4, 2018

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.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 4, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.