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:
{
type: "select",
label: "Selections",
model: "selections"
},
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.
{
type: "input",
inputType: "text",
label: "Name",
model: "name"
},

Available 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
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
You can create custom fields too. Check here how you can do it.