[Vuejs]-Vue Js: passing data

First of all, This error appears because you don’t define name, phone, and email inside Contact.vue. You should define them as props. There are also some other issues:

• In $emit you should provide one argument.
• contacts should be defined in App.vue data.
• You don’t have a NewContact component. You mean to use the Contact one.
• The @add-contact should be placed in CreateAForm.

Working code:

<template>
<div class="contact">
  <li>
      <h2>{{ name }}</h2>
  </li>
  <li>
      {{ phoneNumber }}
  </li>
  <li>
      {{ emailAddress }}
  </li>
  </div>
</template>

<script>
export default {
  props: ['name', 'phoneNumber', 'emailAddress'],
}
</script>

<template>
  <div class="container">
  <form id="contact" action="" method="post" @submit.prevent="submitContact">
    <h3>Form</h3>
    <fieldset>
      <input type="text" v-model="enteredName" />
    </fieldset>
    <fieldset>
      <input type="tel" v-model="enteredPhone" />
    </fieldset>
    <fieldset>
      <input type="email" v-model="enteredEmail" />
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form>
</div>
</template>

<script>
export default {
emits: ['add-contact'],
data() {
    return {
        enteredName: '',
        enteredPhone: '',
        enteredEmail: '',
    };
},
methods: {
    submitContact() {
        this.$emit('add-contact',
        {
          name: this.enteredName,
          phone: this.enteredPhone,
          email: this.enteredEmail
        });
    },
},
};
</script>

<template>
<Nav></Nav>
<CreateAForm @add-contact="addContact"></CreateAForm>
<contact
  v-for="contact in contacts"
  :key="contact.id"
  :id="contact.id"
  :name="contact.name"
  :phone-number="contact.phone"
  :email-address="contact.email">
</contact>


</template>

<script>
import Nav from './components/Nav.vue';
import CreateAForm from './components/CreateAForm.vue';
import Contact from './components/Contact.vue';

export default {
  name: 'App',
  components: {
    Nav,
    CreateAForm,
    Contact,
  },
  data() {
    return {
      contacts: [],
    }
  },
  methods:{
    addContact({ name, phone, email }) {
      const newContact = {
        id: new Date().toISOString(),
        name,
        phone,
        email,
      };
      this.contacts.push(newContact);
    }
  }
}
</script>