VueJS Generators
GitHubNPMJSFiddleCodePen
develop
develop
  • Getting Started
  • Installation
  • Usage
    • Styling
  • Component
    • Schema
    • Model
    • Options
    • Events
  • Fields
    • Field Properties
      • Inside Buttons
    • Core Fields
      • checkbox
      • checklist
      • input
      • label
      • radios
      • select
      • submit
      • textArea
    • Optional Fields
      • cleave
      • dateTimePicker
      • googleAddress
      • image
      • masked
      • noUiSlider
      • pikaday
      • selectEx
      • rangeSlider
      • spectrum
      • staticMap
      • switch
      • vueMultiSelect
    • Custom Fields
  • Groups
  • Validation
    • Built in Validators
    • Custom Validators
    • Handling Validation Events
Powered by GitBook
On this page
  • Available fields
  • Core fields
  • Optional fields
  • Custom fields

Was this helpful?

Fields

PreviousEventsNextField Properties

Last updated 6 years ago

Was this helpful?

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 for boolean values

  • - Checkbox list to select multiple values

  • - Common input field NEW!

  • - Static text (e.g. timestamp, creation time...etc)

  • - Radio buttons to select NEW!

  • - Select list

  • - This is a simple submit button

  • - Text area field

These fields are available in the full version of VueFormGenerator. Some of these also have external dependency.

- Format input text content when you are typing

- datetime picker with bootstrap-datetimepicker component

- Format input text content when you are typing

- Image select field (URL or upload in base64 string)

- Masked text input field with maskedinput component

- Lightweight JavaScript range slider

- A refreshing JavaScript Datepicker

- select list with the bootstrap-select component

- pretty range slider with ion.rangeSlider component

- Color picker with "The No Hassle" Spectrum jQuery Colorpicker component

- Display a static map from Google Maps.

- Switch field (toggle two values (on/off, yes/no, active/inactive)

- Probably the most complete selecting solution for Vue.js

You can create custom fields too. .

Core fields
checkbox
checklist
input
label
radios
select
submit
textArea
Optional fields
cleave
dateTimePicker
googleAddress
image
masked
noUiSlider
pikaday
selectEx
slider
spectrum
staticMap
switch
vueMultiSelect
Custom fields
Check here how you can do it