Update Parent Data from Child Modal Data using Props in vue-CodePudding

I am working on invoice, where i want to add new client using modal and then get added data back to create invoice page (Parent Page). I have tried to follow many previous questions but still not able to figure it out, how to properly use $emit here. How to Pass data from Modal to Parent..

Here are the codes so far.

this is createInvoice.vue

<template>
   <button @click="isComponentModalActive = true">
       Add New Client
   </button>

   <b-modal
      v-model="isComponentModalActive"
       has-modal-card
       full-screen
       :can-cancel="false"
    >
      <client-add-form v-bind="form.clientData"></client-add-form>
    </b-modal>
</template>

<script>
import ClientAddForm from '../../../components/ClientAddForm.vue';
export default {
  components: { ClientAddForm },
    data() {
    return {
      isComponentModalActive: false,
      form: {
        clientData: {
          name: "Gaurav Kumar",
          email: "[email protected]",
          phone: "",
          address: "",
          city: "",
          country: "",
          taxCode: "",
          Type: "",
        },
       }
}
</script>

this is ClientAddForm.vue Modal

    <template>
      <div  style="width: auto">
        <header >
          <p >Add/Modify Customer Information</p>
        </header>
        <section >
          <b-field label="Name">
            <b-input type="text" :value="name" placeholder="Name"> </b-input>
          </b-field>
          <b-field label="Phone">
            <b-input type="phone" :value="phone" placeholder="Phone"> </b-input>
          </b-field>
          <b-field label="Email">
            <b-input type="email" :value="email" placeholder="Email"> </b-input>
          </b-field>
          <b-field label="Address">
            <b-input type="textarea" :value="address" placeholder="Address">
            </b-input>
          </b-field>
          <b-field label="City">
            <b-input type="text" :value="city" placeholder="City"> </b-input>
          </b-field>
          <b-field label="Country">
            <b-input type="text" :value="country" placeholder="Country"> </b-input>
          </b-field>
        </section>
        <footer >
          <b-button label="Close" @click="$parent.close()" />
          <b-button label="Save" type="is-primary" @click="Update()"  />
        </footer>
      </div>
   </template>
    
    
  <script>
    export default {
      props: ["email", "phone", "name", "city", "country", "address"],
    
      methods: {
        Update(){
           //Database Operations etc
           this.$emit()
        }
      }
    }
 </script>

CodePudding user response：

You emit event and pass data this.$emit('updated', this.client) In parent component you listen to event from child and trigger method @updated="handleUpdate"

Take a look at following snippet pls:

Vue.component('client-add-form', {
  template: `
    <div  style="width: auto">
      <header >
        <p >Add/Modify Customer Information</p>
      </header>
      <section >
        <b-field label="Name">
          <b-input type="text" v-model="client.name" placeholder="Name"> </b-input>
        </b-field>
        <b-field label="Phone">
          <b-input type="phone" v-model="client.phone" placeholder="Phone"> </b-input>
        </b-field>
        <b-field label="Email">
          <b-input type="email" v-model="client.email" placeholder="Email"> </b-input>
        </b-field>
        <b-field label="Address">
          <b-input type="textarea" v-model="client.address" placeholder="Address">
          </b-input>
        </b-field>
        <b-field label="City">
          <b-input type="text" v-model="client.city" placeholder="City"> </b-input>
        </b-field>
        <b-field label="Country">
          <b-input type="text" v-model="client.country" placeholder="Country"> </b-input>
        </b-field>
      </section>
      <footer >
        <b-button label="Close" @click="$parent.close()" />
        <b-button label="Save" type="is-primary" @click="update" />
      </footer>
    </div>
  `,
  props: ["formData"],
  data() {
    return {
      client: {...this.formData}
    }
  },
  methods: {
    update(){
       //Database Operations etc
       this.$emit('updated', this.client)
       this.$parent.close()
    }
  },
})

new Vue({
  el: '#demo',
  data() {
    return {
      isComponentModalActive: false,
      form: {
        clientData: {
          name: "Gaurav Kumar",
          email: "[email protected]",
          phone: "",
          address: "",
          city: "",
          country: "",
          taxCode: "",
          Type: "",
        },
      }
    }
  },
  methods: {
    handleUpdate(client) {
      this.form.clientData = client
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<div id="demo">
  <button @click="isComponentModalActive = true">
    Add New Client
  </button>
  <b-modal
     v-model="isComponentModalActive"
     has-modal-card
     full-screen
     :can-cancel="false"
  >
    <client-add-form 
      :form-data="form.clientData" 
      @updated="handleUpdate"
    ></client-add-form>
    </b-modal>
    {{ form }}
</div>