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

Was this helpful?

Groups

A group in the schema groups related fields. Groups are currently output as a <fieldset> element, with a <legend>. For example, this schema:

{
    groups: [
        {
            legend: "User Details",
            fields: [
                {
                    type: "input",
                    inputType: "text",
                    label: "Name",
                    model: "name"
                },
                {
                    type: "input",
                    inputType: "number",
                    id: "current_age",
                    label: "Age",
                    model: "age"
                }
            ]
        }
    ]
}

would produce (simplified) HTML output something like this:

<fieldset>
    <legend>User Details</legend>

    <label>Name</label>
    <input type="text" />

    <label>Age</label>
    <input type="number" />
</fieldset>

You can change the default fieldset tag by passing the tag property to the <vue-form-generator /> component in your markup.

<vue-form-generator tag="div" :model="model" :schema="schema" :options="options"></vue-form-generator>
PreviousCustom FieldsNextValidation

Last updated 6 years ago

Was this helpful?