## value Contains the currently selected value. Very similar to a `value` attribute on an ``. You can listen for changes using 'change' event using v-on. ```js value: { default: null }, ``` ## options An array of strings or objects to be used as dropdown choices. If you are using an array of objects, vue-select will look for a `label` key (ex. `[{label: 'This is Foo', value: 'foo'}]`). A custom label key can be set with the `label` prop. ```js options: { type: Array, default() { return []; } }, ``` ## disabled Disable the entire component. ```js disabled: { type: Boolean, default: false }, ``` ## clearable Can the user clear the selected property? ```js clearable: { type: Boolean, default: true }, ``` ## maxHeight Sets the max-height property on the dropdown list. ```js maxHeight: { type: String, default: "400px" }, ``` ## searchable Enable/disable filtering the options. ```js searchable: { type: Boolean, default: true }, ``` ## multiple Equivalent to the `multiple` attribute on a ``. ```js placeholder: { type: String, default: "" }, ``` ## transition Sets a Vue transition property on the `.dropdown-menu`. vue-select does not include CSS for transitions, you'll need to add them yourself. ```js transition: { type: String, default: "fade" }, ``` ## clearSearchOnSelect Enables/disables clearing the search text when an option is selected. ```js clearSearchOnSelect: { type: Boolean, default: true }, ``` ## closeOnSelect Close a dropdown when an option is chosen. Set to false to keep the dropdown open (useful when combined with multi-select, for example) ```js closeOnSelect: { type: Boolean, default: true }, ``` ## label Tells vue-select what key to use when generating option labels when each `option` is an object. ```js label: { type: String, default: "label" }, ``` ## index Tells vue-select what key to use when generating option values when each `option` is an object. ```js index: { type: String, default: null }, ``` ## getOptionLabel Callback to generate the label text. If `{option}` is an object, returns `option[this.label]` by default. Label text is used for filtering comparison and displaying. If you only need to adjust the display, you should use the `option` and `selected-option` slots. ```js getOptionLabel: { type: Function, default(option) { if (this.index) { option = this.findOptionByIndexValue(option); } if (typeof option === "object") { if (!option.hasOwnProperty(this.label)) { return console.warn( `[vue-select warn]: Label key "option.${this.label}" does not` + ` exist in options object ${JSON.stringify(option)}.\n` + "http://sagalbot.github.io/vue-select/#ex-labels" ); } return option[this.label]; } return option; } }, ``` ## onChange An optional callback function that is called each time the selected value(s) change. When integrating with Vuex, use this callback to trigger an action, rather than using `v-model` to retrieve the selected value. ```js onChange: { type: Function, default: function(val) { this.$emit("input", val); } }, ``` ## onTab Select the current value if `selectOnTab` is enabled ```js onTab: { type: Function, default: function() { if (this.selectOnTab) { this.typeAheadSelect(); } } }, ``` ## taggable Enable/disable creating options from searchInput. ```js taggable: { type: Boolean, default: false }, ``` ## tabindex Set the tabindex for the input field. ```js tabindex: { type: Number, default: null }, ``` ## pushTags When true, newly created tags will be added to the options list. ```js pushTags: { type: Boolean, default: false }, ``` ## filterable When true, existing options will be filtered by the search text. Should not be used in conjunction with taggable. ```js filterable: { type: Boolean, default: true }, ``` ## filterBy Callback to determine if the provided option should match the current search text. Used to determine if the option should be displayed. ```js filterBy: { type: Function, default(option, label, search) { return (label | "").toLowerCase().indexOf(search.toLowerCase()) > -1; } }, ``` ## filter Callback to filter results when search text is provided. Default implementation loops each option, and returns the result of this.filterBy. ```js filter: { type: Function, default(options, search) { return options.filter(option => { let label = this.getOptionLabel(option); if (typeof label === "number") { label = label.toString(); } return this.filterBy(option, label, search); }); } }, ``` ## createOption User defined function for adding Options ```js createOption: { type: Function, default(newOption) { if (typeof this.mutableOptions[0] === "object") { newOption = { [this.label]: newOption }; } this.$emit("option:created", newOption); return newOption; } }, ``` ## resetOnOptionsChange When false, updating the options will not reset the select value ```js resetOnOptionsChange: { type: Boolean, default: false }, ``` ## noDrop Disable the dropdown entirely. ```js noDrop: { type: Boolean, default: false }, ``` ## inputId Sets the id of the input element. ```js inputId: { type: String }, ``` ## dir Sets RTL support. Accepts `ltr`, `rtl`, `auto`. ```js dir: { type: String, default: "auto" }, ``` ## selectOnTab When true, hitting the 'tab' key will select the current select value ```js selectOnTab: { type: Boolean, default: false }