Vue.js編輯動態組件中的變量

我想創建一個對象列表。每個元素（列表中的）都由一個子組件可視化。我的目標是創建一個動態列表，我可以在其中編輯元素。Vue.js編輯動態組件中的變量

我有一個父組件<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>）被注意到，並將修改發送到服務器。

感謝您的答案，並提前建議！

來源

2017-09-26 LakiGeri

爲了紀念單向數據流，這是實現你要尋找的一種方式：

家長通過道具給孩子
母公司註冊V系列：childUpdate = 「parentUpdate」事件偵聽器
當突變對孩子做，孩子$發出childUpdate事件傳遞新的價值，每當一個孩子叫childUpdate
父執行parentUpdate父0家長將數據發送到服務器和諸如此類的東西
家長更新自己的狀態來表示的變化
傳遞給孩子的支柱，現在自動更新，因爲數據流1天

最後一部分的描述是重要的：孩子不做本地修改，但修改是通過將事件和新值發送給父母以及負責更新聯繫人詳細信息的父母進行的。由於聯繫人是傳遞給孩子的道具，孩子的狀態會自動更新。

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

這樣的一個例子另一個辦法是使用V-模型可以從鏈接的部分下面的文檔中找到。

來源

2017-09-26 15:19:13 pate

Thx！我會給它一個機會。 – LakiGeri

希望它能很好地工作。請記住標記我的答案爲接受:) – pate

它的工作原理！再次感謝擴展響應。 :) – LakiGeri

Vue.js編輯動態組件中的變量

回答

相關問題