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
  • Special properties of field
  • selectOptions
  • Usage

Was this helpful?

  1. Fields
  2. Optional Fields

selectEx

PreviouspikadayNextrangeSlider

Last updated 6 years ago

Was this helpful?

This is a select list field for multiple selection.

Please note, this field depend on the following library:

  • ()

Special properties of field

Property

Default

Accepted values

Description

multiSelect

none

Boolean

If true, you can select multiple items. In this case the value will be an Array

values

none

Array or Function

List of items. It can be an array with items, or a function, what is resulted an array. The item will be a String or an object with an id and a name properties.

selectOptions

{}

Object

selectOptions

@TODO

Usage

Multiple select list with array of strings:

{
    type: "selectEx",
    label: "Skills",
    model: "skills",
    multi: true,
    required: true,
    multiSelect: true,
    selectOptions: {
        liveSearch: true,
        maxOptions: 3,
        size: 4,
        selectedTextFormat: "count > 3"
    },
    values: [
        "HTML5",
        "Javascript",
        "CSS3",
        "CoffeeScript",
        "AngularJS",
        "ReactJS",
        "VueJS"
    ]
}

Simple select list:

{
    type: "selectEx",
    label: "Country",
    model: "address.country",
    required: true,
    multiSelect: false,
    values: faker.definitions.address.country,
    default: "United Kingdom",
    selectOptions: {
        liveSearch: true,
        size: 10
    },
    validator: validators.required
}

Settings to select component.

jQuery
BootStrap
bootstrap-select
github
Read more info from options