时间戳

首页 > 解决方案 > Vue Js：传递数据

javascript - Vue Js：传递数据

问题描述

我正在学习 vue js 并尝试将表单数据提交到联系人卡片中。我遇到了这些错误，需要一些帮助来解决 - 在渲染期间访问了属性“电话”，但未在实例上定义。在 <Contact onAddContact=fn > 在 .

感谢任何可以提供帮助的人！

这是我的代码：Contact.Vue

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

<script>
export default {

}
</script>

CreateAForm.Vue

<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',
        this.enteredName,
        this.enteredPhone,
        this.enteredEmail
        );
    },
},
};
</script>

应用程序.Vue

<template>
<Nav></Nav>
<CreateAForm></CreateAForm>
<contact @add-contact="addContact"></contact>
<new-contact 
v-for="contact in contacts"
:key="contact.id"
:id="contact.id"
:name="contact.name"
:phone-number="contact.name"
:email-address="contact.email">
</new-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,
  },
  methods:{
    addContact(name, phone, email) {
      const newContact = {
        id: new Date().toISOString(),
        name: name,
        phone: phone,
        email: email,
      };
      this.contacts.push(newContact);
    }
  }
}
</script>

标签： javascriptvue.jsvuejs3

解决方案

首先，出现这个错误是因为你没有在Contact.vue里面定义姓名、电话、邮箱。您应该将它们定义为props. 还有一些其他的问题：

  • 在$emit你应该提供一个论点。
  • contacts应该在 App.vue 数据中定义。
  • 你没有NewContact组件。你的意思是使用那个Contact。
  • @add-contact应该CreateAForm放在.

工作代码：

<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>

推荐阅读