Vue.js edit variables in dynamic components

Question

I would like to make an object list. Each element (of the list) is visualised by a child component. My goal is to create a dynamical list, where I can edit the elements.

I have a parent component <contacts-list-form> what has an array of contacts an show me them dynamically in <contact-element-form> :

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

contact-element-form looks like this:

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

How can I reach that data of every <contact-element-form> is editable, and the parent ( <contacts-list-form> ) is noticed about that, and sends the modification to the server.

Thanks for the answers, and advises in advance!

Answer 1

To honor the one-way data flow, this is one way to implement what you're looking for:

• Parent passes the prop to the child
• Parent registers v-on:childUpdate="parentUpdate" event listener
• When a mutation is made on the child, the child $emits a childUpdate event passing the new value to the parent
• Parent executes parentUpdate whenever a child calls childUpdate
• Parent sends the data to the server and whatnot
• Parent updates its own state to represent the change
• The prop passed to the child is now automatically updated since the data flows one day

The last part of the description is important: the child doesn't make local modifications but the modification happens by emitting the event and the new value to the parent and the parent it responsible for updating the contact details. As the contact is a prop that's been passed to the child, the child's state updates automatically.

There's an example of this here https://v2.vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

Another would be to use v-model which may be found from the documentation below the linked part.