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://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:

Majed Badawi Majed Badawi · Accepted Answer · 2021-01-17T18:21:25

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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Cannot catch custom events on Vue.JS

2 Answers