vuejs v2 pass data to component and update parent when changed

Question

What I want to build is a Form which can detect errors from its Inputs. The inputs are rendered (in my current setup) in a section in the form. But after hours of work, it doesn't work.

What is the best approach to make the concept will work? Should I used slots for this or is there a other way?

This is my code:

//Form.vue
<template>
<form method="POST" action="/projects">

<slot></slot>

<div class="control">
    <button class="button is-primary">Create</button>
</div>

</template>

<script>
import {FormHelper} from './classes/FormHelper.js';

export default {

    /*
     * The component's properties.
     */
    props: {
        fields: Object
    },

    data() {
        return {
            form: new FormHelper(this.fields) //this must be kwown in the Input.
        };
    },

}
</script>

//Input.vue
<template>
<div class="control">
    <label for="name" class="label">{{label}}</label>

    <input type="text" id="name" name="name" class="input">

    <!--<span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>-->
</div>

</template>

<script>

export default{
    /*
     * The component's properties.
     */
    props: {
        placeholder: String,
        label: String,
        name: String,
        originalValue: String,
    },

}
</script>

Implementation in the browser:

<vue-form :fields="{'name': 'piet', 'description': 'arie'}">
    <vue-input
        label="The Name"
        name="name"
    ></vue-input>

    <vue-input
        label="The Description"
        name="description"
    ></vue-input>
</vue-form>

Answer 1

you can use custom event. in cild component

this.$emit('EventName', someData)

and in parent you can handle it with

v-on:EventName="doSmth"

Answer 2

From the documentation:

In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.

How to pass props

Following is the code to pass props to child component: (with v-model value is passed as props, or with v-bind in myMessage parentMsg is passed as props)

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

How to emit event

Following is how you update parent: whenever in child you increment: you intimate parent by calling this.$emit('increment') which is handled by parent.

HTML:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JS:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})