[Vuejs]-Why the emit of an event is not working with vue, while the logic is completed

by

0👍

✅

The emit events are only passed to the direct parent not the grand parent component, in this case try to provide the event as you did with firstName and lastName :

App.vue :

export default {
  name: "App",
  data() {
   ....
  },
  provide() {
    return {
      firstName: this.user_detail1.firstName,
      lastName: this.user_detail1.lastName,
      paymentAmount: this.user_detail2.paymentAmount,
      accountNumber: this.user_detail2.accountNumber,
      next: this.nextStep,
      previous: this.previousStep
    };
  },
  components: {
    ....
  },
  methods: {
    isFinalStep() {
      this.finalStep = true;
    },
    nextStep() {
      console.log("next");
      this.stepIndex++;
    },
    previousStep() {
      this.stepIndex--;
    },
  },
  computed: {
   ...
  },
};

in the step component :

export default {
  inject: ["firstName", "lastName","next","previous"],
  data() {
    return {
      firstName: this.firstName,
      lastName: this.lastName,
    };
  },
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.next();
    },
  },
};

Leave a comment