Fields

VueJS Generators

GitHub NPM JSFiddle CodePen

Search…

1.0.0

Fields

A field in the schema defines an input element to a value of model. For example, if you want to edit the model.selections value with a select field, you have to create a field with select type, what looks like this:
1
{
2
    type: "select",
3
    label: "Selections",
4
    model: "selections"
5
},
Copied!
Each field has its own options, so be sure to check out their documentations.
For example, input field need an inputType to be specified as well.
1
{
2
    type: "input",
3
    inputType: "text",
4
    label: "Name",
5
    model: "name"
6
},
Copied!
Available fields
​Core fields​
These fields are available in the core version of VueFormGenerator.
​checkbox - Checkbox for boolean values
​checklist - Checkbox list to select multiple values
​input - Common input field NEW!
​label - Static text (e.g. timestamp, creation time...etc)
​radios - Radio buttons to select NEW!
​select - Select list
​submit - This is a simple submit button
​textArea - Text area field
​Optional fields​
These fields are available in the full version of VueFormGenerator. Some of these also have external dependency.
​cleave - Format input text content when you are typing
​dateTimePicker - datetime picker with bootstrap-datetimepicker component
​googleAddress - Format input text content when you are typing
​image - Image select field (URL or upload in base64 string)
​masked - Masked text input field with maskedinput component
​noUiSlider - Lightweight JavaScript range slider
​pikaday - A refreshing JavaScript Datepicker
​selectEx - select list with the bootstrap-select component
​slider - pretty range slider with ion.rangeSlider component
​spectrum - Color picker with "The No Hassle" Spectrum jQuery Colorpicker component
​staticMap - Display a static map from Google Maps.
​switch - Switch field (toggle two values (on/off, yes/no, active/inactive)
​vueMultiSelect - Probably the most complete selecting solution for Vue.js
​Custom fields​
You can create custom fields too. Check here how you can do it.

Events

Field Properties

Last modified 3yr ago

Copy link

Contents

Available fields

​Core fields​

​Optional fields​

​Custom fields​

Core fields

Optional fields

Custom fields