Search code examples
vue.jseventsstyled-components

I can't manage to catch emitted event in VueJs

I have 2 components: MenuItem.vue

<styled-menu-item
:label="label"
:selected="selected"
@click="onClick(label)">

...

  methods: {
onClick(e) {
  this.$emit('menu-change', e);
  }
}

and Sidebar.vue

<StyledSidebar @menu-change="changeActiveTab">
  <menu-item label="Chat" :selected="active == 'Chat'" />
  <menu-item label="Settings" :selected="active == 'Settings'" />
  ...
</StyledSidebar>

...

methods: {
changeActiveTab(e) {
  console.log(e);
  this.active = e;
  }
}

I can see in Vue chrome extension my 'menu-change' event being emitted with correct payload but I can't catch it in its parent component. '@menu-change' is never triggered.

Btw I'm using styled components which may cause the issue. Thanks for reading.

Solution

  • Finally found a workaround.

    I had to use $emit.$parent('menu-change',e)