[Vuejs]-Vue `vm.$on()` callback not working in parent when event is emitted from dynamic component child

by

2👍

✅

I’m guessing this is because the event listener is listening for a swap-components event emitted by the parent component itself. Perhaps you can fix that by listening for a swap-components event from the child component then emitting an event on the parent component.

<template>
  <div>
    <h1>The dynamic components ⤵️</h1>
    <component
      :is="current"
      v-bind="dynamicProps"
      @swap-components="$emit('swap-components')"
    ></component>
    <button
      @click="click"
    >Click me to swap components from within the parent of the dynamic component</button>
  </div>
</template>

Or you can call your method directly when the event is emitted by the child component ..

<template>
      <div>
        <h1>The dynamic components ⤵️</h1>
        <component
          :is="current"
          v-bind="dynamicProps"
          @swap-components="swapComponents"
        ></component>
        <button
          @click="click"
        >Click me to swap components from within the parent of the dynamic component</button>
      </div>
    </template>
👤Husam Ibrahim

1👍

this is not bound to the context anymore when you use function. It is only limited to the function scope. Use arrow function to let this bound to the parent context.

Change:

this.$nextTick(function() {

With:

this.$nextTick(() => {
👤Bhojendra Rauniyar

Leave a comment