Events

update:model-value

Triggered when the selected value changes. Passes the selected option (String or Object type) to the handler as a parameter

open

Triggered when the dropdown is open.

this.$emit('open')

close

Triggered when the dropdown is closed.

this.$emit('close')

option:selecting

Triggered after an option has been selected, before updating internal state.

this.$emit('option:selecting', selectedOption)

export type OptionSelectingHandler = (option: string | object) => void;

option:selected

Triggered when an option has been selected, after updating internal state.

this.$emit('option:selected', selectedOption)

export type OptionSelectedHandler = (option: string | object) => void;

option:deselecting

Triggered when an option has been deselected, before updating internal state.

this.$emit('option:deselecting', selectedOption)

export type OptionDeselectingHandler = (option: string | object) => void;

option:deselected

Triggered when an option has been deselected, after updating internal state.

this.$emit('option:deselected', deselectedOption)

export type OptionDeselectedHandler = (option: string | object) => void;

option:created

Triggered when taggable is true and a new option has been created.

/**
 * @param {Object} newOption - created option
 */
this.$emit('option:created', newOption)

export type OptionCreatedHandler = (option: string | object) => void;

search

Anytime the search string changes, emit the 'search' event. The event is passed with two parameters: the search string, and a function that accepts a boolean parameter to toggle the loading state.

See the AJAX Guide for a complete example.

/**
 * @param {String} searchString - the search string
 * @param {Function} toggleLoading - function to toggle loading state, accepts true or false boolean
 */
this.$emit('search', this.search, this.toggleLoading)

<!-- example usage -->
<v-select
  @search="
    (search, loading) => {
      loading(true)
      fetchOptions(search).then(() => loading(false))
    }
  "
/>

export type ToggleLoadingFunction = (toggle: boolean | null) => boolean;
export type SearchHandler = (search: string, toggleFunction: ToggleLoadingFunction) => void;

search:blur

Triggered when the text input loses focus. The dropdown will close immediately before this event is triggered.

this.$emit('search:blur')

search:focus

Triggered when the text input gains focus. The dropdown will open immediately before this event is triggered.

this.$emit('search:focus')