Vue.js数据传递问题：提交表单数据至联系人卡片时出现实例属性未定义错误求助

Hey there! Let's break down what's causing that "Property 'phone' was accessed during render but is not defined on instance" error and fix your code step by step.

First, the Root Cause of the Error #

Your Contact.vue component is trying to use name, phone, and email in its template, but it hasn't been told to expect these values as props from its parent component. Vue components don't automatically inherit data from parents—you have to explicitly define the props they should receive.

Step 1: Fix Contact.vue to Accept Props #

Update your Contact.vue to declare the required props so it can receive the contact data from App.vue:

<template>
  <div class="contact">
    <li>
      <h2>{{ name }}</h2>
    </li>
    <li>{{ phone }}</li>
    <li>{{ email }}</li>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true // Ensures this prop is always passed
    },
    phone: {
      type: String,
      required: true
    },
    email: {
      type: String,
      required: true
    }
  }
}
</script>

Step 2: Fix App.vue's Issues #

There are a few problems in App.vue that need addressing:

1. You forgot to initialize the contacts array in your component's data.
2. You're using an undefined <new-contact> component (you imported Contact but didn't use it correctly for the list).
3. The prop names and values in your loop were mismatched (e.g., :phone-number="contact.name" was passing the name instead of the phone number).
4. Vue recommends using PascalCase for component tags in templates (so <contact> → <Contact>).

Here's the fixed App.vue:

<template>
  <Nav></Nav>
  <CreateAForm @add-contact="addContact"></CreateAForm>
  <!-- Loop through contacts and render a Contact component for each -->
  <Contact 
    v-for="contact in contacts" 
    :key="contact.id" 
    :name="contact.name" 
    :phone="contact.phone" 
    :email="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: [] // Initialize empty array to store contacts
    }
  },
  methods:{
    addContact(name, phone, email) {
      const newContact = {
        id: new Date().toISOString(),
        name: name,
        phone: phone,
        email: email,
      };
      this.contacts.push(newContact);
    }
  }
}
</script>

Step 3: Optional (But Nice) - Clear the Form After Submission #

To improve user experience, add code to CreateAForm.vue to clear the input fields after submitting:

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

Why This Works #

• Contact.vue now explicitly accepts the name, phone, and email props, so Vue knows they're valid properties to use in the template.
• App.vue initializes the contacts array, so when you push new contacts, Vue can reactively update the list.
• The loop correctly uses the Contact component and passes the right data to each instance.

内容的提问来源于stack exchange，提问作者user13148397