SelectComponent

This component allows you to create a select component

Example

SelectComponent

export default {
  name: "App",
  data() {
    return {
      form: {
        servicesDefinition: {
          type: SelectComponent,
          default: "",
          "field-wrapper": { class: "is-12" },
          "field-input": {
            isRequired: false,
            label: this.$t("approveMethod"),
            expanded: true,
            placeholder: this.$t("placeholder", {
              key: this.$t("approveMethod").toLowerCase(),
            }),
            optionId: "id",
            optionName: "name",
            optionItems: [
              { id: "1", name: "name1" },
              { id: "2", name: "name2" },
              { id: "3", name: "name3" },
            ],
            showClearIcon: true,
          },
          events: {
            input: (v) => {},
          },
        },
      },
    };
  },
};

Props

NameDescriptionTypeRequiredDefault
vid-Stringfalseundefined
valuemust be included in propsfalsenull
horizontal-Booleanfalsetrue
labelInside-Booleanfalsefalse
labelOnBorder-Booleanfalsefalse
validationMode-Stringfalse"aggressive"
hideValidation-Booleanfalsefalse
optionIdOption idStringfalseundefined
optionNameOption nameStringfalseundefined
optionItemsItemsArrayfalse
nativeSizeSame as native sizeNumberfalse1
isRequired-Booleanfalsetrue
sizeSize of the select, optionalStringfalseundefined
placeholder-Stringfalseundefined
showClearIcon-Booleanfalsefalse
clearIconSize-Stringfalse"is-small"
clearIconCustomClass-Stringfalse""
localeLocale string {en, es ...} for display language on componentStringfalse"en"

Events

Event NameDescriptionParameters
input--
focus--
blur--