时间戳

首页 > 解决方案 > 没有从发出的数据向下一级

javascript - 没有从发出的数据向下一级

问题描述

我在向下一级发出数据时遇到问题。发射正在工作，但我想用它发送的对象在其他组件中未定义

编辑联系.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 在这里我在 EditContact 中发送联系人对象，我想取出 newcontact，它已被更改，但是当我尝试输出数据（newcontact）时它是未定义的

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

我不知道还能做什么，我不是 vue 新手

标签： javascriptvue.jsvuejs2vue-componentemit

解决方案

您应该按如下方式定义发出的事件处理程序：

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

在你的方法中：

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

推荐阅读