[Vuejs]-Vue.js event emitted by child component does not reach parent

by

1👍

✅

You’re emitting 'deleteComponent' and listening to 'delete-component'. This conversion doesn’t work with event registrations, only for converting component names.

https://v2.vuejs.org/v2/guide/components-custom-events.html

Try this instead:

// child component

methods: {
    deleteComponent(event) {
      this.$emit('delete-component', this.$vnode.key);
    },
  },

EDIT: As Eldar correctly pointed out in the comments, your listener is also listening at the wrong element. Move the listener to your dynamic component like so:

// parent component

<!-- template tags not necessary unless you're trying to render more than 1 root node per v-for element -->

            <div class="col-3" v-for="block in content.body" :key="`col-${block._uid}`">
              <component
                @delete-component="onDeleteChildComponent($event)"
                :is="block.component"
                :block="block"
                :key="block._uid">
              </component>
            </div>

EDIT 2: The method you’re trying to listen to is not listed in your methods, but it’s one level too high. Keep track of your brackets! 😉

methods: {
    getComponents() {
      ...
    },
    addComponent(componentType) {
      ...
    },
  },
  onDeleteChildComponent(id) {
    console.log('delete child');
    console.log(id);
  },

should be:

methods: {
    getComponents() {
      ...
    },
    addComponent(componentType) {
      ...
    },
    onDeleteChildComponent(id) {
      console.log('delete child');
      console.log(id);
    },
  },
👤Excalibaard

Leave a comment