Confirm child login components to send using Vee-Validate and vue js 2

Question

I'm currently trying to create a registration form with several Input Field components that all require verification after clicking the Submit button. They all currently check on their own when the text inside is changed, but it's hard for me to make a global call to all input fields to check everything. What I'm trying to achieve is the following: http://vee-validate.logaretm.com/examples#validate-form

yes, this is a simmiler to this question Verifying child login components on sending using Vee-Validate But I don't understand

I have singleInput.vue

<template lang="html">
  <div :class="'col m'+col">
    <div class="input-field">
      <i v-if="icon" class="material-icons prefix">{{icon}}</i>
      <input
      v-if="area"
      :type="type"
      @input="onChange"
      :id="id"
      :required="required"
      :name="id"
      v-validate="'required'"
      />
      <textarea
      v-if="!area"
      @input="onChange"
      :id="id"
      :required="required"
      :name="id"
      class="materialize-textarea"></textarea>
      <label :for="id">
        {{label}}
        <span v-if="required" class="red-text">*</span>

      </label>
      <span class="red-text error">{{$store.state.errors[id]}}</span>
    </div>
  </div>
</template>

<script>

export default {
  name:'single-input',
  props: {
    col:{
      type: Number,
      default:6
    },
    id:{
      type: String,
      required:true
    },
    required:{
      type:Boolean,
      default: true
    },
    label:{
      type:String,
      required:true
    },
    onChange:{
      type:Function,
      required:true
    },
    area:{
      type: Boolean,
      default: true
    },
    type:{
      type: String,
      default: "text"
    },
    icon:{
      type:String
    },
    validation:{

      type:String
    }
  }
}
</script>

<style lang="css">

</style>

and info.vue

<template lang="html">
  <div class="row">
    <single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input>

  </div>
</template>

<script>
import SingleInput from "./SingleInput";
export default {
  name: 'info',
  methods:{

  onChange(e){

  }
},
  data(){
    return{
      informations:[
        {
          label: "First Name",
          id: "fname",
          icon: "person"
        },
        {
          label: "Last Name",
          id: "lname",
          required:false,
          icon: "person"
        },
        {
          label: "Email",
          id: "email",
          type:"email",
          icon:'email'
        },
        {
          label: "Telephone",
          id: "phone",
          type:"text",
          icon:'phone'
        },
        {
          label: "Department",
          id: "depa",
          type:"text",
          icon:'domain'
        },
        {
          label: "Organization",
          id: "org",
          type:"text",
          icon:'account_balance'
        },
        {
          label: "Address",
          id: "address",
          icon:'directions',
          area: false,
          col:12
        },
        {
          label: "City",
          id: "city",
          type:"text",
          icon:'place'
        },
        {
          label: "Post code",
          id: "post",
          type:"text",
          icon:'pin_drop'
        }

      ]
    }
  },
  components:{
    SingleInput
  }
}
</script>

<style lang="css">
</style>

I try my best but cannot access errors in info.vue file

!

Answer 1

, jsfiddle:

:  -add

submit: function(){
        var validationArray = this.$children.map(function(child){
        return child.$validator.validateAll();
      });

    window.Promise.all(validationArray).then((v) => {
            alert('From Submitted!');
        }).catch(() => {
            alert('Correct them errors!');
        });
    }

( ).

- :

{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}

: , , , , "" - , .