CODEWITHSUNDEEP
javascripthtmlvuejs2
tesarwijaya
tesarwijaya

Reputation: 365

VueJS2 how to dynamically emit event to parent component?

just like the title i need to dynamically emit an event to parent component's methods, i have a component structured like this

<TableComponent 
  :actionmenus="actionmenus"
  @edit="parenteditmethod"
  @delete="parentdeletemethod">
</TableComponent>

here is actionmenus object

actionmenus: [
  {title: 'Edit', emitevent: 'edit'},
  {title: 'Delete', emitevent: 'delete'}
]

and then here is snippet of my tablecomponent

...
<ul>
  <li v-for="menu in actionmenus"><a @click="$emit(menu.emitevent)" class="text-menu">{{ menu.title }}</a></li>
</ul>
...

i know this should be easily done by $emit('edit') or $emit('delete') without using actionmenus object but the $emit() part should be dynamic based on the passed array actionmenus so that the tablecomponent can be re-used on different case. how should i approaching this? is there any way?

Upvotes: 5

Views: 1807

Answers (2)

zapala.grzegorz
zapala.grzegorz

Reputation: 103

@codincat is right, that it all works. It's true also for Vue3

const rootComponent = {
  el: "#app",
  data: function () {
    return {
      actionmenus: [
        { title: "Edit", emitevent: "edit" },
        { title: "Delete", emitevent: "delete" }
      ]
    };
  },
  methods: {
    parenteditmethod() {
      console.log("edit");
    },
    parentdeletemethod() {
      console.log("delete");
    }
  }
};

const app = Vue.createApp(rootComponent);
app.component("table-component", {
  props: { actionmenus: Array },
  template: `
    <ul>
      <li v-for="menu in actionmenus">
        <a @click="$emit(menu.emitevent)" class="text-menu">{{ menu.title }}</a>
      </li>
    </ul>`
});

const rootComponentInstance = app.mount("#app");
<!-- https://stackoverflow.com/questions/43750969/vuejs2-how-to-dynamically-emit-event-to-parent-component -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.min.js"></script>

<div id="app">
  <table-component :actionmenus="actionmenus" @edit="parenteditmethod" @delete="parentdeletemethod">
  </table-component>
</div>

Upvotes: 0

Kristian Lilov
Kristian Lilov

Reputation: 610

From what I understand, you would like to emit an event from the child component to the parent, and pass some data with the emit (sorry if thats not the case).

As you know, you can emit events in the child component like this :

$emit("EVENT");

And Catch it in the parent like this :

<childTag v-on:EVENT="parentFunction"></childTag>

You can also pass data to the parent from the child like this : 

$emit("EVENT",DATA);

And catch the data in the parent function like this 

<childTag v-on:EVENT="parentFunction"></childTag>
...
methods{
  parentFunction(DATA){
    //Handle the DATA object from the child
  }
}

Hope this helps and best of luck!

Upvotes: 1

Related Questions