Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue form generator

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A form can be generated automatically using vue-form-generator.
You can simply define the schema, it will take care of form validation for you!

(do note that this is client side validation)

This could be as fancy as:

vuejs form

Vue form example

Start by defining a Vue instance that containsa vue-form-generator component.
Then define your model: all the input fields you want in the form.

console.clear()

var vm = new Vue({
el: "#app",

components: {
"vue-form-generator": VueFormGenerator.component
},

data: {
model: {
id: 1,
name: "Evan Elscript",
password: "[email protected]@",
age: 30,
skills: ["Javascript", "VueJS"],
email: "[email protected]",
status: true
},
schema: {
fields: [{
type: "input",
inputType: "text",
label: "Name",
model: "name",
readonly: false,
featured: true,
required: true,
disabled: false,
placeholder: "User's name",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "number",
label: "Age",
model: "age",
min: 18,
validator: VueFormGenerator.validators.number
}, {
type: "input",
inputType: "email",
label: "E-mail",
model: "email",
placeholder: "User's e-mail address",
validator: VueFormGenerator.validators.email
}, {
type: "checklist",
label: "Skills",
model: "skills",
multi: true,
required: true,
multiSelect: true,
values: ["Javascript", "AngularJS", "ReactJS", "VueJS"]
}
]
},

formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
},

methods: {
},

});

Then create your template.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.net</title>
<!-- include vue -->
<script src="//unpkg.com/vue"></script>

<script type="text/javascript" src="//unpkg.com/[email protected]"></script>

<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div id="app" class="container py-5">

# Vue Form Generator

<div class="container" id="app">
<div class="panel panel-default">
<div class="panel-heading">Form</div>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</div>
</div>

</div>
</body>
<script src="app.js"></script>
</html>

Finally create your stylesheet:

html {
font-family: Tahoma;
font-size: 14px;
}

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}

pre {
overflow: auto;
}
pre .string { color: #885800; }
pre .number { color: blue; }
pre .boolean { color: magenta; }
pre .null { color: red; }
pre .key { color: green; }

h1 {
text-align: center;
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
}

fieldset {
border: 0;
}

.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-color: #ddd;
}

.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;

padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.panel-body {
padding: 15px;
}

.field-checklist .wrapper {
width: 100%;
}


© vuejsexamples.net - Privacy Policy - Cookie Policy