Vue Components Reference

FormComponent.vue

import Vue from 'vue';
import Form from "../../front-section/services/Form";

Vue.component('user-form', {
    data() {
        return {
            form: new Form(),
            values: {},
            fileInput: {},
        }
    },
    methods: {
        handleFileUpload(e) {
            let name = e.target.name;
            this.form.errors.clear(name);
            this.fileInput[name] = [];
            self = this;
            $.each(e.target.files, function (index, data) {
                self.fileInput[name].push(data);
            })
        },
        submitForm(e) {
            let target = e.target.id;
            let action = e.target.action;
            let self = this;
            let o = {};
            let a = $('#' + target).serializeArray();
            $.each(a, function () {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            $.each(o, function (name, value) {
                self.values[name] = value;
            });
            $.extend(this.values, this.fileInput);
            this.form = new Form(this.values);
            this.form.post(action).then(function (response) {
                if (response.redirect !== undefined) {
                    window.location.href = response.redirect;
                }
            }).catch(function (error) {
                $("html, body").animate({scrollTop: ($($('.error')[0]).offset().top) - 80}, "slow");
            });

            this.values = {};
        }
    }
})
;

VueCOmponentForm.blade.php

@extends('layouts.app')

@section('content')
	<div class="panel-header panel-header-sm"></div>
	<div class="content" id="admin">
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-header clearfix">
						<h4 class="card-title pull-left">Add User</h4>
						<a href="{{ URL::previous() }}" class="btn btn-default pull-right">
                            <span class="btn-label">
                                <i class="now-ui-icons arrows-1_minimal-left"></i>
                            </span> Back
						</a>
					</div>

					<div class="card-body">
						<div class="row">
							<div class="col-md-12">
								<user-form inline-template>
									{!! Form::open(['route'=>'users.store', 'method'=>'post', 'class'=>'form-horizontal', 'id'=>'user-form','files'=>true,'@submit.prevent'=>'submitForm','@keydown'=>'form.errors.clear($event.target.name)']) !!}
									@include('users._form')
									<div class="row">
										<div class="col-md-12">
											<button type="submit" class="btn btn-fill btn-primary loader-button">Add</button>
										</div>
									</div>
									{!! Form::close() !!}
								</user-form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection