Cannot catch custom events on Vue.JS

Question

I'm trying to pass data from a child to the parent component using an event but I'm not being able to catch it. The event is fired on a child's component function but not caught on the parent's component function.

Can someone figure out why the callbackMethod is not called?

I already tried other names using kebab-case, tried without the custom data/parameter, tried to catch the event on the template tag, tried wrapping up the child component into a div, tried to remove the parenthesis on the v-on statement...

Child Component:

HTML

              <v-btn
                  color="primary"
                  icon
                  small
                  elevation="1"
                  @click="openSettings"
              >
                <v-icon>
                  mdi-dots-vertical
                </v-icon>
              </v-btn>

JavaScript

export default {
  name: "ChildComponent",
  components: {
    OtherChild
  },
  props: {
    my_prop: Object
  },
  methods: {
    openSettings: function () {
      // always use kebab-case for event names!
      // (https://v2.vuejs.org/v2/guide/components-custom-events.html)
      this.$emit("open-child-settings", this.my_prop)
      console.log("event")

    }
  }

Parent Component:

HTML

    <v-container>
      <ChildComponent @open-child-settings="callbackMethod($event)"/>
    </v-container>

JavaScript

export default {
    name: 'ParentComponent',
    components: {
      ChildComponent,
      OtherChildComponent
    },
    methods: {
      callbackMethod: function (my_prop){
        this.settingsDialog  = true;
        this.tempProp = my_prop;
        console.log("callback")
      }
    }

Dependencies

  "dependencies": {
    "core-js": "^3.6.5",
    "dotenv": "^8.2.0",
    "vue": "^2.6.11",
    "vuetify": "^2.2.11"
  }

EDIT: Added the Code on a Sand Box so you can see the whole panorama and some snapshots of the Vue.js Extension:

Abhishek Raj · Answer 1 · 2021-01-17T18:29:25.713

0

Update your parent component by following:

<v-container>
      <ChildComponent @open-child-settings="callbackMethod"/>
</v-container>

As per my understanding, you don't need $event here. So, just remove it and run it. It would work.

See this - Share data from child to parent component

edited Jan 17 '21 at 18:29

answered Jan 17 '21 at 18:11

Abhishek Raj

480
4
14

@pinxau1000, I guess, you are doing a toy mistake. Otherwise, it would work.. – Abhishek Raj Jan 17 '21 at 18:22
I edited the main question and added a code playground link and some print screens. All links are on the bottom of the main publication. – pinxau1000 Jan 17 '21 at 22:33

Majed Badawi · Accepted Answer · 2021-01-17T18:39:30.680

0

Assuming my_prop is defined in the child component, try this:

const childcomponent = Vue.component('child-component', {
  template: '#child-component',
  props: {
    my_prop: Object
  },
  methods: {
    openSettings: function () {
      this.$emit("open-child-settings", this.my_prop); //pass my_prop
    }
  }
});

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  components: { childcomponent },
  data: () => ({ settingsDialog: false, tempProp: null, propData: {id:1} }),
  methods: {
    callbackMethod: function (my_prop){
      this.settingsDialog  = true;
      this.tempProp = my_prop;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-container>
    <childcomponent 
      @open-child-settings="callbackMethod($event)"
      :my_prop="propData"
    />
  </v-container>
  settingsDialog: {{settingsDialog}}<br>
  tempProp: {{tempProp}}
</v-app>

<template id="child-component">
  <v-btn
    color="primary"
    icon
    small
    elevation="1"
    @click="openSettings"
  >
    <v-icon>mdi-dots-vertical</v-icon>
  </v-btn>
</template>

edited Jan 17 '21 at 18:39

answered Jan 17 '21 at 18:21

Majed Badawi

27,616
4
25
48

My implementation has the childcomponent on a different vue file than parentcomponent. I changed my_prop to this.my_prop and my_prop to an array and still not working. On my implementation my_prop is an child property of type Object. props: { my_prop: Object } – pinxau1000 Jan 17 '21 at 18:37
@pinxau1000 the type of ``my_prop`` is not the issue. Concerning the file component, it shouldn't be an issue if you're importing the child in the parent and registering it. You're probably missing a small detail. Try to compare your code with the above solution or share your implementation in a fiddle for further support. – Majed Badawi Jan 17 '21 at 18:41
I edited the main question and added a code playground link and some print screens. All links are on the bottom of the main publication. – pinxau1000 Jan 17 '21 at 22:33
@pinxau1000 in ``Body.vue``, you need to put ``@open-child-settings="callbackMethod($event)"`` on the ```` component instead of the `` – Majed Badawi Jan 17 '21 at 22:46
Yes it worked now! But why on the card component? On the docs it is stated that should be on parent component. – pinxau1000 Jan 18 '21 at 10:46
@pinxau1000 because it's sent from the child component, this is why the listener needs to be put on it. Take the example of a parent component having two child components sending the same message, you would listen to each separately not with one listener on the ``template``. Please accept the answer as the solution if the problem was solved. – Majed Badawi Jan 18 '21 at 10:57

Cannot catch custom events on Vue.JS

2 Answers2