emit event with arguments from child to parent with ember 3.6

Question

I would like emit one event from child to parent but with some argument.

Child component javascript

import Component from '@ember/component';
export default Component.extend({
  tagName: 'li',

  actions: {
    favoriteWasClicked() {
      const organization = this.get('organization');
      // organization.id value equal to 'facebook' here in my app
      // we're gonna send its id to parent component "orgs" like an argument of clicked method
      this.clicked(organization);
    }
  }
});

Parent component .hbs template

{{child-component
  clicked=(action "favoriteClicked" value="organization.id")
}}

Parent component javascript controller file

import Controller from '@ember/controller';
export default Controller.extend({
  actions: {
    favoriteClicked(orgId) {
      console.log(orgId);
    }
  }
});

I'm getting undefined in console.log(orgId); Why? What am i missing

Thank you!

feanor07 feanor07 · Accepted Answer · 2018-12-20T19:35:51

You simply need to change organization.id to just id. What I mean is; you need to do the following:

{{child-component
  clicked=(action "favoriteClicked" value="id")
}}

You send the event from the child component with an organization; which simply contains an id; but not organization.id; so it must be just id for the value property in the action passing within parent's template.

I prepared an ember twiddle for you to illustrate the solution I proposed in action. Hope that helps.

emit event with arguments from child to parent with ember 3.6

1 Answers