Building a form with Vuejs. Pass data from children to parent

Question

I'm trying to build a form using "v-for" for input component and then generate a pdf file with PDFMake using data from inputs. But I didn't know how to pass the data from input component back to parent.

I read a lot of topics, but can't find a way to do this.

Here is short code without additional inputs, checkboxes etc. I plan to use around 15 inputs with different parameters to generate final PDF. Some of parameters also will be used to change final data depending of conditional statements. Everything is work fine if code in one file, without loop and components. But not now.

Here is parent:

<template lang="pug">
  .form
    Input(v-for="data in form.client_info" v-bind:key="data.id" v-bind:data="data")
    button(@click="pdfgen") Download PDF
</template>

<script>
 export default {

  components: {
   Input: () => import('@/components/items/form/input')
  },

  data() {
   return {
    client_name: '',
    client_email: '',
    form: {
     client_info: [
      {id:'client_name', title:'Name'},
      {id:'client_email', title: 'Email'},
      {id:'foo', title: 'foo'}
     ],
    }
   }
  },

  methods: {
   pdfgen: function () {
    var pdfMake = require('pdfmake/build/pdfmake.js')
    if (pdfMake.vfs == undefined) {
     var pdfFonts = require('pdfmake/build/vfs_fonts.js')
     pdfMake.vfs = pdfFonts.pdfMake.vfs;
    }

    if (this.foo) {
     var foo = [ 
      'Foo: ' + this.foo
     ];
    } else {
     foo = ''
     ]
    }

    var docDefinition = {
     content: [
      'Name: ' + this.client_name,
      'Email: ' + this.client_email,
      '\n',
      foo
     ]
    }
    pdfMake.createPdf(docDefinition).download('Demo.pdf');
   }
  }
 }
</script>

Here is a children (Input component):

<template lang="pug">
 label.form_item
  span.form_item_title {{ data.title }}
  input.form_item_input(:v-model="data.id" type="text")
</template>

<script>
 export default {
  props: ['data']
 }
</script>

Any ideas how to make it work?

Answer 1

I found a solution using Vuex. So now my components look like this.

Here is parent:

<template lang="pug">
  .form
    Input(v-for="data in formClient" v-bind:key="data.id" v-bind:data="data")
    button(@click="pdfgen") Download PDF
</template>

<script>
 export default {

  components: {
   Input: () => import('@/components/items/form/input'),
   store: () => import('@/store'),
  },

  computed: {
    formClient() { return this.$store.getters.client }
  }
 }
</script>

Here is a children (Input component):

<template lang="pug">
 label.form_item
  span.form_item_title {{ data.title }}
  input.form_item_input(v-model="data.value" :type="data.input_type")
</template>

<script>
 export default {
  props: ['data'],
  computed: {
   form: {
    get () {
     return this.$store.state.obj.message
    },
    set (value) {
     this.$store.commit('updateMessage', value)
    }
   }
  }
 }
</script>

Here is a store module:

<script>
 export default {
 actions: {},
 mutations: {},
 state: {
  form: {
   client: [
    {id:'client_name', title:'Name', value: ''},
    {id:'client_email', title: 'Email', value: ''},
    {id:'foo', title: 'foo', value: ''}
   ]
  }
 },
 getters: {
  client: state => {
   return state.form.client;
  }
 }
}
</script>

Now I can read updated data from store directly from PDFMake function.

Answer 2

You'll want to use a method that vue has build-in named $emit().

Before going into how to do that, a quick explanation. Because vue attempts to make data flow one-directional there is not a super quick way to just pass data back to a parent. What Vue proposes instead is to pass a method to the child component that, when called, will 'emit' the value it changed to it's parent and the parent can then do what it wants with that value.

So, in your parent component you'll want to add a method that will handle a change when the child emits. This could look something like:

onChildValueChanged(value){ this.someValue = value }

The value we passed to the function will be coming from our child component. We will need to define in our child component what this function should do. In your child component you could have a function that looks like so:

emitValueChange(event){ this.$emit('childFunctionCall', this.someChildValue) }

Next we need to tie those two functions together by adding an attribute on our child template. In this example that might look like:

<Child :parentData="someData" v-on:childFunctionCall="onChildValueChanged"></Child>

What that above template is doing is saying that when the function on:childFunctionCall is 'emited' then our function in the parent scope should fire.

Finally, in the child template we just need to add some event that calls out emiter. That could look like:

<button v-on:click="emitToParent">This is a button</button>

So when our button is clicked, the emiter is called. This triggers the function in our child component named 'emitToParent' which in turn calls the function we passed to our child component.

You'll have to tailor your use case to match the exam