Vue.js编辑动态组件中的变量

Question

我想创建一个对象列表。每个元素（列表中的）都由一个子组件可视化。我的目标是创建一个动态列表，我可以在其中编辑元素。

我有一个父组件<contacts-list-form>什么有触点阵列的动态告诉我他们在<contact-element-form>：

<contact-element-form v-for="contact in contacts" :key="contact.id" :contact="contact"></contact-element-form> 

接触部件，形式如下：

<template lang="html"> 
    <md-card> 
    <md-card-header> 
     <div class="md-title">Contact</div> 
     <md-icon @click="removeMyself">remove</md-icon> 
    </md-card-header> 
     <md-card-content> 
     <md-input-container> 
      <md-icon>person</md-icon> 
      <label>contactName</label> 
      <md-input name="contactName" v-model="contact.name" required /> 
     </md-input-container> 

     <md-input-container> 
      <md-icon>email</md-icon> 
      <label>contactEmail</label> 
      <md-input name="contactEmail" v-model="contact.email" required /> 
     </md-input-container> 

     <md-input-container> 
      <md-icon>phone</md-icon> 
      <label>contactPhoneNumber</label> 
      <md-input name="contactPhoneNumber" v-model="contact.phoneNumber" required /> 
     </md-input-container> 
    </md-card-content> 
    </md-card> 
</template> 

<script> 
export default { 
    props: ["contact"], 
    data() { 
    return { 
     contact: {}, 
    } 
    }, 
    methods: { 
    removeMyself() { 
     console.debug(this.contact.id + ". id will be removed."); 
     // it will emits to its parent. 
    } 
    }, 
    create() {} 
} 
</script> 

<style lang="css"> 
</style> 

我怎样才能达到每个<contact-element-form>的数据都是可编辑的，并且父母（<contacts-list-form>）被注意到，并将修改发送到服务器。

感谢您的答案，并提前建议！

Answer 1

为了纪念单向数据流，这是实现你要寻找的一种方式：

• 家长通过道具给孩子
• 母公司注册V系列：childUpdate = “parentUpdate”事件侦听器
• 当突变对孩子做，孩子$发出childUpdate事件传递新的价值，每当一个孩子叫childUpdate
• 父执行parentUpdate父0家长将数据发送到服务器和诸如此类的东西
• 家长更新自己的状态来表示的变化
• 传递给孩子的支柱，现在自动更新，因为数据流1天

最后一部分的描述是重要的：孩子不做本地修改，但修改是通过将事件和新值发送给父母以及负责更新联系人详细信息的父母进行的。由于联系人是传递给孩子的道具，孩子的状态会自动更新。

这里有https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

这样的一个例子另一个办法是使用V-模型可以从链接的部分下面的文档中找到。