VueJS Getting Started

Let's get started with VueJS!

HTML

<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<template lang="html" id="singleInputTmp">
  <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">{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}</span>
    </div>
  </div>
</template>

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

<div id="app">
  <info></info>
</div>

JavaScript

Vue.use(VeeValidate);

new Vue({
	el: '#app',
	data: function(){
		return{
			x: {
				test: 'John',
				test2: 'Smith'
			}
		}
	},
	components: {
		'info': {
			template: '#infoTmp',
			name: 'info',
			methods: {
				onChange(e){
					
				},
        submit: function(){
        debugger;
        
        	var validationArray = this.$children.map(function(child){
          	return child.$validator.validateAll();
          });
        
        window.Promise.all(validationArray).then((v) => {
        debugger;
                // eslint-disable-next-line
                alert('From Submitted!');
            }).catch(() => {
                // eslint-disable-next-line
                alert('Correct them errors!');
            });
        
        	//this.$validator.validateAll()
          
        
        }
        
			},
			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: {
				'single-input': {
					template: '#singleInputTmp',
					name: 'single-input',
					props: {
						col: {
							type: Number,
							default: 6
						},
						id: {
							type:...