Not geting data from emit one level down

Question

I am having a problem with emitin data one level down. emit is working but the object I would like to send with it is being undefined in other components

EditContact.vue

<template>
  <div>
    <b-form @submit="onSubmit">
      <b-form-group id="input-group-1" label="Name:" label-for="input-1">
        <b-form-input
          id="input-1"
          v-model="newcontact.name"        
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-2"
        label="Email address:"
        label-for="input-2"
      >
        <b-form-input
          id="input-2"
          v-model="newcontact.email"
          type="email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-3"
        label="Phone number:"
        label-for="input-3"
      >
        <b-form-input
          id="input-3"
          v-model="newcontact.phone"          
          required
        ></b-form-input>
      </b-form-group>     

      <b-button type="submit" variant="info" style="margil-right: 5px"
        >Change</b-button
      >
    </b-form>
  </div>
</template>


<script>
export default {
  name: "AddContact",
  props: {
    contact: Object,    
  },
  data() {
    return {
      newcontact: {
        id: this.contact._id,
        name: this.contact.name,
        email: this.contact.email,        
        phone: this.contact.phone,
      },
    
    };
  },
  methods: {
    onSubmit(event) {
      event.preventDefault();   

      this.$emit('edit-contact', this.newcontact); // emiting this.newcontact from forum above
    },
  },
};
</script>

Contact.vue Here I am sending contact Object in EditContact and I want to get newcontact out, that has been changed, but when I try to output data (newcontact) it is undefined

<template>
  <div @dblclick="showEdit()" class="contact">
    <!-- <p>{{contact.id}}.</p> -->
    <div class="user">
      <h3>
        {{ contact.name }}
      </h3>
      <i @click="$emit('delete-contact', contact._id)" class="fas fa-times">
      </i>
    </div>
    <div v-if="showEditContact">
      <EditContact :contact="contact"  class="edit" @edit-contact="$emit('edit-contact', newcontact)" />
    </div>
  </div>
</template>

<script>
import EditContact from "./EditContact";

export default {
  name: "Contact",   
  props: {
    contact: Object,   
    
    showEditContact: Boolean,       
  },
  components: {
    EditContact,
  },
  methods:{
    showEdit(){
      this.showEditContact = !this.showEditContact;
    },     
    Edit(newcontact){
      console.log("Contact Level : " + newcontact._id)      
    }
  },
    
};
</script>

I don't know what else to do, donti am new to vue

Answer 1

You should define the emitted event handler as follows :

 <EditContact :contact="contact"  class="edit" @edit-contact="Edit" />

in your methods :

 methods:{
    showEdit(){
      this.showEditContact = !this.showEditContact;
    },     
    Edit(newcontact){
      console.log("Contact Level : " + newcontact._id)      
    }
  },