Vue component form based on JSON Schema
npm install --save vue-json-schema
-
schema
Object (required) The JSON Schema object. Use thev-if
directive to load asynchronous schema. -
v-model
Object (optional)default: [object Object]
Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type. -
autocomplete
String (optional) This property indicates whether the value of the control can be automatically completed by the browser. Possible values are:off
andon
. -
novalidate
Boolean (optional) This Boolean attribute indicates that the form is not to be validated when submitted. -
item-class
String (optional) Use this prop to enable inputs wrapping -
data-class-error
String (optional)default: 'form-error'
-
input
undefined -
change
Fired when an form input value is changed. -
invalid
Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form. -
submit
Fired when a form is submitted
-
input(name)
Get a form input component -
reset()
Reset the value of all elements of the parent form. -
submit(e)
Send the content of the form to the server -
setErrorMessage(message)
Set a message error. -
clearErrorMessage()
clear the message error.
Define your JSON Schema file:
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"title": "Newsletter Subscription",
"properties": {
"name": {
"type": "string",
"minLength": 8,
"maxLength": 80,
"attrs": {
"placeholder": "Full Name",
"title": "Please enter your full name"
}
},
"email": {
"type": "string",
"maxLength": 120,
"attrs": {
"type": "email",
"placeholder": "Email"
}
},
"lists": {
"type": "string",
"enum": ["Daily New", "Promotion"]
}
},
"additionalProperties": false,
"required": ["name", "email", "lists"]
}
In your Vue file:
<template>
<form-schema :schema="schema" v-model="model" @submit="submit">
<button type="submit">Subscribe</button>
</form-schema>
</template>
<script>
import FormSchema from 'vue-json-schema'
import schema from './schema/newsletter-subscription.json'
export default {
data: () => ({
schema: schema,
model: {}
}),
methods: {
submit (e) {
// this.model contains the valid data according your JSON Schema.
// You can submit your model to the server here
}
},
components: { FormSchema }
}
</script>
Use FormSchema.setComponent(type, component[, props = {}])
to define custom element to use for rendering.
See vue-json-schema-demo-elementui for a complete example.
// an element-ui example
import FormSchema from 'vue-json-schema'
import {
Form,
FormItem,
Input,
Radio,
Checkbox,
Select,
Option,
Button
} from 'element-ui'
FormSchema.setComponent('label', FormItem)
FormSchema.setComponent('email', Input)
FormSchema.setComponent('text', Input)
FormSchema.setComponent('textarea', Input)
FormSchema.setComponent('checkbox', Checkbox)
FormSchema.setComponent('radio', Radio)
FormSchema.setComponent('select', Select)
FormSchema.setComponent('option', Option)
// Use the third argument to define props of the component
FormSchema.setComponent('button', Button, {
type: 'primary',
label: 'Subscribe'
})
// The third argument can also be a function that return an object
FormSchema.setComponent('form', Form, (vm) => {
// vm is the FormSchema VM
const labelWidth = '120px'
const model = vm.data
const rules = {}
vm.fields.forEach((field) => {
rules[field.name] = {
required: field.required,
message: field.title
}
})
return { labelWidth, rules, model }
})
export default {
data: () => ({
schema: {...}
}),
// ...
components: { FormSchema }
}
Under the MIT license. See LICENSE file for more details.